ios - 为什么在 React Native 中添加父 View 标签会改变样式？

Question

添加 View 父级破坏了我的样式，为什么会这样？ React Native 的 View 标签是否有一些我不知道的默认样式？

下面是 Button 组件以及带和不带 View 标签的屏幕截图。

class Button extends Component {
  render() {
    return (
      <View>
        <TouchableOpacity style={styles.buttonStyle}>
          <Text style={styles.textStyle}>Hello</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textStyle: {
    alignSelf: "center",
    color: "#007aff",
    fontSize: 16,
    fontWeight: "600",
    paddingTop: 10,
    paddingBottom: 10
  },
  buttonStyle: {
    flex: 1,
    alignSelf: "stretch",
    backgroundColor: "#fff",
    borderRadius: 5,
    borderWidth: 1,
    borderColor: "#007aff",
    marginLeft: 5,
    marginRight: 5
  }
});

按钮正在另一个组件(一个典型的卡片组件)中呈现，如果需要我也可以提供该代码。

Answer 1

基本上，您的 TouchableOpacity 具有您所有的容器样式，这将导致您看到的奇怪问题。通过定义 flex:1，这意味着它将自身拉伸(stretch)以填充父 View 的区域。但是，您的父 View 还没有被伸缩，所以它只会填充它需要的空间。但是，它会将您的文本组件放入看起来合适的位置，因此您会得到奇怪的结果。

为了调试这个，我经常会设置 backgroundColor: 'red'，看看 flexbox 在做什么。在您的情况下，我认为不需要父 View ？ TouchableOpacity 只是 View 的扩展，因此您应该能够在其中进行所有样式设置。如果你想添加一个 View ，我建议用你的 Touchable 包装它 - 否则你有搞乱你的 onPress 的风险。有点像

render() {
return (
  <View style = {{height: 100, shadowColor: 'black', shadowRadius: 3}}> //RANDOM CARD CODE


    <TouchableOpacity style={styles.buttonStyle}>
      <View> //ANY STYLES HERE
        <Text style={styles.textStyle}>Hello</Text>
      </View>
    </TouchableOpacity>


  </View>
)};