在 React Native 中使用绝对值和 Flexbox 创建布局

Question

我是一名尝试学习 React Native 的 iOS 开发人员。目前我正在尝试弄清楚如何使用 FlexBox 创建这样的布局：

我不确定如何在本机反应中使用相对值。当我尝试实现它时，我得到了这个：

如您所见，中间的视图切割了中间的左右视图。有任何想法吗？这是我的代码：

<View style={{flexDirection: 'row', flex: 1}}>
    <SafeAreaView>
      <TouchableOpacity style={{left: 20, top: 24, height: 44, width: 44}}>
        <Image
          source={require('../../assets/images/backButton.png')}
          style={{height: '100%', width: '100%'}}
        />
      </TouchableOpacity>
    </SafeAreaView>
    <View style={{flex: 2, backgroundColor: '#FF2F2F'}}></View>
    <SafeAreaView>
      <Text
        style={{
          right: 20,
          top: 24,
          height: 44,
          fontSize: 14,
        }}>
        1 / 6
      </Text>
    </SafeAreaView>
  </View>

Answer 1

这里的问题是您错误地排序了导致布局重叠并阻止您获得所需结果的类（View、SafeView 等）。

检查我在下面提出的解决方案：

return (
  <SafeAreaView style={{flex: 1}}>
    <View style={{flexDirection: 'row', flex: 1, height: "100%"}}>
      <TouchableOpacity style={{height: 44, width: 44, margin: 10}}>
        <Image
          source={require('../../assets/images/backButton.png')}
          style={{height: '100%', width: '100%'}}
        />
      </TouchableOpacity>
      <View style={{flex: 1, backgroundColor: '#FF2F2F'}}></View>
      <Text
        style={{
          padding: 14,
          fontSize: 14,
        }}>
        1 / 6
      </Text>
    </View>
  </SafeAreaView>
);

Running example for the solution on expo Snack

随意探索和编辑它！