Question

在一个 React 场景中，一个通用的 App 容器包含一个称为 Row 的呈现组件，我们如何指示后者是两次-使用 flexbox 与它的同级 View 一样大？

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

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

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

上面的示例不会给出预期的结果，因为 flex 样式从 App 组件传递给 Row 元素（{flex： 2}）被表示组件本身分配的样式覆盖。

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

Answer 1

您对flexbox的理解是正确的，问题在于您没有正确地将{{flex: 2}}传递给Row组件。

此行中的

<Row style={{flex: 2}} />样式道具只是传递给Row组件的道具，您没有使用它，因此它没有被应用。

尝试以下

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>
  )
};

正如您在Row中看到的那样，组件样式道具传递给了View，我添加了backgroundColor: green作为组件自己样式的示例，然后style道具是来自组件道具的样式，应该可以使用。

要概述style道具只能传递给react-native组件，而不传递给自定义组件，要像您的示例一样使用style，您只需传递该样式像上面的代码一样自己对本机View做出反应。

React Native Flexbox：将增长因子设置为通用表示组件

1 个答案: