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

Question

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

我不确定如何在 React Native 中使用 with 的相对值。当我尝试实现它时，我得到了这个：

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

<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

随时探索和编辑它！

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

Create Layout with absolute Values and Flexbox in React Native

layout

react-native

react-native-flexbox