react-native - 使用 TouchableHighlight 创建自定义按钮

Question

我正在尝试使用 TouchableHighlight 实现自定义按钮

我创建了一个按钮类，并将其导入到我的主程序中，如下所示:

在button.js中:

export default class Button extends React.Component {
    render() {
        return (
            <TouchableHighlight>
                <View style={styles.button}>
                    <Text style={styles.buttonText}>
                    </Text>
                </View>
            </TouchableHighlight>
        )
    }
}

在 app.js 中:

import Button from './button'


<View>
     <Button onPress={ () => navigate('Chat', { user: 'Abe' })} title = "Abe"
     />
</View> 

当我运行这个程序时，我只是得到一个空白按钮，没有文本或 onPress 事件。

如何将 onPress 和 title 值传递给 Button 类？

谢谢!

Answer 1

您需要访问 Button 组件中的 props。

export default class Button extends React.PureComponent {
  render() {
    const { onPress, title } = this.props;
    return (
      <TouchableHighlight onPress={onPress}>
        <View style={styles.button}>
            <Text style={styles.buttonText}>
              {title}
            </Text>
        </View>
      </TouchableHighlight>
    )
  }
}