反映原生布局固定宽度并拉伸剩余空间

Question

如何在本地反应中制作这样的东西？

在右边我想要一个具有固定宽度的组件,在左边则将所有剩余空间放在另一个组件上.

Answer 1

试试这个:

  <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>