Question

以 React Native 方式，如果我有这个结构：

function Component(props){
  return (
    <View style={props.style1}>
      <View style={{overflow: hidden}}>
        <View style={props.style2}></View>
      </View>
    </View>
  );
}

如何覆盖第二个视图上的 {overflow: hidden}？假设我没有能力更改组件，因为我使用了一个我无权访问的库。

Answer 1

只有当你有这样的东西时你才能覆盖样式

export interface Props {
  extraStyle: ViewStyle
  }


function Component(props: Props){
  return (
    <View style={props.style1}>
      <View style={[ {overflow: visible}, props.extraStyle ]}>
        <View style={props.style2}></View>
      </View>
    </View>
  );
}

并且您可以访问外部的 extraStyle 道具，因此如果您定义 extraStyle = {{overflow: 'auto'}}，那么它将被覆盖。否则，您无法从外部更改其样式

从父/子组件覆盖 React Native 样式

1 个答案: