Question

无论如何使用视图作为按钮？我有点无能为力。

return (
  <View style={styles.container}>
    <View style={styles.vicon} onClick={() => this.props.navigation.navigate('MessageScreen')}>
      <Image source={require('../misc/icon1.png')} style={styles.iicon} />
    </View>
    <View style={styles.vtexts} onClick={() => this.props.navigation.navigate('MessageScreen')}>
      <Text style={styles.tname}>{this.state.name}</Text>
      <Text style={styles.tmessage}>{this.state.message}</Text>
    </View>
  </View>
);

到目前为止，这是我。我需要使用视图作为按钮重定向到messageScreen。希望可以有人帮帮我。 Thanksss

Answer 1

您可以将TouchableWithoutFeedback放在View中，然后将导航功能放在onPress prop中。

return (
  <View style={styles.container}>
    <View style={styles.vicon}>
        <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('MessageScreen')}>
            <Image source={require('../misc/icon1.png')} style={styles.iicon} />
        </TouchableWithoutFeedback>
    </View>
    <View style={styles.vtexts}>
        <TouchableWithoutFeedback onPress={() => this.props.navigation.navigate('MessageScreen')}>
            <View>
              <Text style={styles.tname}>{this.state.name}</Text>
              <Text style={styles.tmessage}>{this.state.message}</Text>
            </View>
        </TouchableWithoutFeedback>
    </View>
  </View>
);

您可以使用样式道具来获得所需的样式。

快乐的编码！

Answer 2

只需使用TouchableOpacity即可。正是您需要的，请在此处查看react-native文档中的定义：

用于使视图正确响应触摸的包装器。按下，包裹视图的不透明度降低，使其变暗。

您可以在此处找到详细信息：https://facebook.github.io/react-native/docs/touchableopacity.html

使用视图作为按钮 - 反应原生

2 个答案: