React Native Flex：1 可以工作，但改变了层次结构

Question

上面的红色组件应该占据整个屏幕，按钮应该位于底部

`<SafeAreaView style={{flex: 1, backgroundColor: 'red'}}> //red component
      <TouchableOpacity //purple component
        style={{
          //   flex: -1,
          width: '100%',
          bottom: 0,
          height: 40,
          backgroundColor: 'purple',
          alignSelf: 'center',
          justifyContent: 'center',
          alignItems: 'center',
        }}>
        <Text>Add New Note</Text>
      </TouchableOpacity>
</SafeAreaView>`

我希望紫色可触摸不透明度位于屏幕底部

Answer 1

您需要在 TouchableOpacity 样式中添加

position: 'absolute'

才能使

bottom: 0

工作