TouchableHighlight 和 TouchableOpacity 影响 Android 上的布局答案

【问题标题】：TouchableHighlight and TouchableOpacity affect layout on AndroidTouchableHighlight 和 TouchableOpacity 影响 Android 上的布局
【发布时间】：2015-10-02 17:22:42
【问题描述】：

我注意到将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',
},

【问题讨论】：

标签： react-native

【解决方案1】：

解决方法是不引入包装视图。只需在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>

【讨论】：

完美运行！

【解决方案2】：

根据文档，要回答“这是预期的”问题，是的。

https://facebook.github.io/react-native/docs/touchableopacity

“不透明度是通过将子项包装在 Animated.View 中来控制的，该 Animated.View 将添加到视图层次结构中。请注意，这会影响布局。”

【讨论】：

【解决方案3】：

<TouchableOpacity style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'black',margin:2}}>
   <Image style={{width:30,height:30,marginBottom:3}} source={require('../images/movies_white.png')} />
   <Text style={{color:'#fff'}}>Lịch Sử</Text>
</TouchableOpacity>

而不是

<View style={{flex:1,justifyContent:'center',alignItems:'center',backgroundColor:'black',margin:2}}>
   <Image style={{width:30,height:30,marginBottom:3}} source={require('../images/movies_white.png')} />
    <Text style={{color:'#fff'}}>Lịch Sử</Text>
</View>

【讨论】：

【解决方案4】：

TouchableOpacsity 上的样式而不是视图

【讨论】：

您能否添加更多详细信息以使此答案更好？