将本机基本按钮与道具一起使用

Question

我想创建一个可重复使用的按钮组件，但我遇到了一些问题。我回来了undefined is not an onject evaluting '_nativebase.stylrsheetcreate'。我尝试破坏 onPress 和标题，但没有成功。有人可以就如何解决这个问题给出明确的解释吗？谢谢

import React from 'react';
import {  View, Text, Button, StyleSheet } from 'native-base';

export const StyledButton = props => {
    return (
        <View style={styles.button}>
            <Button
                block
                full
                bordered
                light
                onPress={this.props.onPress}
            >
                <Text
                    style={{
                        color: '#FFFFFF',
                    }}
                >
                    {this.props.title}
                </Text>
                {this.props.children}
            </Button>
        </View>
    );
};


const styles = StyleSheet.create({
    button: {
        flex: 1,
        padding: 10,
    }
});

渲染

<StyledButton
title='Cancel'
onPress={this.somefunction}

/>

Answer 1

删除 this 使用 props.someprop

import React from 'react';
import { StyleSheet } from 'react-native';
import { View, Text, Button } from 'native-base';

export const StyledButton = props => {
  return (
    <View style={styles.button}>
      <Button block full bordered light onPress={props.onPress}>
        <Text
          style={{
            color: '#FFFFFF',
          }}>
          {props.title}
        </Text>
        {props.children}
      </Button>
    </View>
  );
};

const styles = StyleSheet.create({
  button: {
    flex: 1,
    padding: 10,
  }
});

将本机基本按钮与道具一起使用

use native base button with props

reactjs

react-native

native-base