使用flex对齐项目并提供所需的视图空间

Question

如何设置这两个视图的样式，以便第一个视图将占用所需的空间，而第二个视图将占据屏幕的其余部分，并尝试使用justifycontent和alignItems，但是youtube视图消失了。

return (
      <View style={styles.main}>
        <View>
          <Text>Hello WebView</Text>
        </View>
        <View style={styles.youtube}>
          <WebView
            source={{ uri: "https://www.youtube.com/watch?v=wcibw-m8tRk" }}
            startInLoadingState={true}
          />
        </View>
      </View>
    );

这是我的样式：

 view: {
    flex: 1,
    backgroundColor: '#fff'
  },
  youtube: {
    height: 400,
    alignItems: 'stretch',
  }

Answer 1

您可以使用flex或flexGrow进行定义，因此，如果您将第一个视图设置为flex：2，而将youtube设置为flex：1，则该视图的大小将是youtube视图的2倍。发生这种情况是因为flex属性的总和为3，所以总共为3个空格，其中2个用于视图，1个用于youtube。

如果您希望视图具有所需的空间，则只需删除flex / flexGrow属性，该视图将适合内容。