react-native - TouchableHighlight和TouchableOpacity影响Android上的布局

Question

我注意到用TouchableWithoutFeedback或TouchableHighlight替换TouchableOpacity可能会导致布局差异。这是预期的吗？

例子:

<TouchableWithoutFeedback onPress={this.onClick}>
  <View style={styles.row_container}>
    <Text style={styles.row_text}>
      {'I count the number of taps: ' + this.state.clicks}
    </Text>
  </View>
</TouchableWithoutFeedback>

用 TouchableWithoutFeedback:



用 TouchableOpacity替换它:



样式是:

row_container: {
  backgroundColor: 'rgba(0, 0, 0, 0.1)',
  flex: 1,
  height: 100,
  borderColor: '#333333',
  borderWidth: 1,
  borderRadius: 5,
  padding: 5,
},
row_text: {
  flex: 1,
  fontSize: 18,
  alignSelf: 'center',
},

Answer 1

解决方案是不引入包装器 View 。只需直接在TouchableHighlight或TouchableOpacity上设置样式即可:

<TouchableOpacity onPress={this.onClick} style={styles.row_container}>
  <Text style={styles.row_text}>
    {'I count the number of taps: ' + this.state.clicks}
  </Text>
</TouchableOpacity>