javascript - react native 布局固定宽度并拉伸(stretch)剩余空间

我该如何在react-native中做出类似的事情？

在右边，我想要一个具有固定宽度的组件，在左边，我需要所有剩余空间的另一个组件。

最佳答案

试试这个:

  <View style={{flex: 1, flexDirection: 'row'}}>
    <View style={{
      backgroundColor: 'blue',
      flexGrow: 1,
    }}>
      <Text>Fluid</Text>
    </View>
    <View style={{
      backgroundColor: 'red',
      width: 100,
    }}>
      <Text>Fixed</Text>
    </View>
  </View>