React native React native flexbox：将生长因子设置为通用表示组件

在React场景中，通用应用程序容器包含一个名为Row的表示组件，我们如何使用flexbox指示后者的大小是其同级视图的两倍

导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

这就是行组件的外观，它再次在父元素上使用flexbox来利用所有可用空间：

export default function Row(props: Props){
  return (
    <View style={{flex: 1}}>
      //some more children flex items
    </View>
  )
};

导出默认功能行（道具：道具）{
返回(
//更多儿童弹性物品
)
};

上面的示例不会给出预期的结果，因为从App组件（{flex:2}）传递到Row元素的flex样式被从presentational组件本身中指定的样式覆盖

---

制作其flex增长因子由容器组件设置的flex表示组件的最佳实践是什么？

您对flexbox的理解是正确的，问题是您没有正确地将

{{flex:2}

传递到

行
组件

此行中的style道具只是传递给
行的一个道具，您没有使用它，因此它不会被应用

试试下面的方法

export default class App extends Component<Props> {
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1}} />
        <Row style={{flex: 2}} />
      </View>
    );
  }
}


export default function Row(props: Props){
  const { style } = props;
  return (
    <View style={[{backgroundColor: 'green'}, style]}>
      //some more children flex items
    </View>
  )
};

导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认功能行（道具：道具）{
const{style}=props；
返回(
//更多儿童弹性物品
)
};

正如您在
行中所看到的那样，
组件样式道具被传递到
视图中
我添加了
背景色：绿色
作为组件自身样式的示例，然后
样式
道具是来自组件道具的样式，这应该会起作用

要重述
style
prop只能传递给
react native
组件，而不能传递给您的自定义组件，要能够像您的示例中那样使用
style
，您只需像上面的代码一样，自己将该样式传递给react native
View
。
这是您的建议吗？或者更喜欢例如将flex=“2”单独设置为元素上的道具？不，因为这是一种样式，所以最好传递样式对象。。。因为以后可能需要添加更多样式。。。我个人认为传递样式对象更好，就像在您的示例中一样，除非行是一个特定于布局的组件，您希望以这种方式进行自定义
export default class App extends Component<Props> {
  render() {
    return (
      <View style={{flex: 1}}>
        <View style={{flex: 1}} />
        <Row style={{flex: 2}} />
      </View>
    );
  }
}


export default function Row(props: Props){
  const { style } = props;
  return (
    <View style={[{backgroundColor: 'green'}, style]}>
      //some more children flex items
    </View>
  )
};