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组件中的道具。

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>
    )
  }
}

使用TouchableHighlight创建自定义按钮

1 个答案: