在 React Native 中定位 View 的子元素

Question

我正在使用 React Native 创建一个视图，结果应该如下所示。

但它的到来如下:

对应代码如下：

<View style={{marginBottom: 40, marginHorizontal: 30, marginTop: 16, alignItems: "center"}}>
                    <View>    
                        <View style={{flexDirection:"row"}}>
                            <FontAwesome5 name='wallet' size={24}/>
                            <Text style={{fontSize: 18, marginLeft: 16}}>Wallet</Text>
                        </View>
                        <Text style={{fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4}}>{`Available Balance \u20B9 200`}</Text>
                    </View>
                    <View style={{marginTop: 10}}>    
                        <View style={{flexDirection:"row"}}>
                            <FontAwesome5 name='credit-card' size={24}/>
                            <Text style={{fontSize: 18, marginLeft: 16}}>Card</Text>
                        </View>
                        <Text style={{fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4}}>XXXXXX 1235</Text>
                    </View>
                </View>

我只是将第一个子视图复制粘贴到主视图中的第二个。为什么在这种情况下定位不正确？任何帮助将不胜感激。

Answer 1

这个问题是因为没有给视图固定宽度和文本长度。

    <View style={{ marginBottom: 40, marginHorizontal: 30, marginTop: 16, alignItems: "center" }}>
      <View style={{ backgroundColor: 'red' }}>
        <View style={{ flexDirection: "row" }}>
          <Icon name='wallet' size={24} />
          <Text style={{ fontSize: 18, marginLeft: 16 }}>Wallet</Text>
        </View>
        <Text style={{ fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4 }}>{`Available Balance \u20B9 200`}</Text>
      </View>
      <View style={{ marginTop: 10, backgroundColor: 'red' }}>
        <View style={{ flexDirection: "row" }}>
          <Icon name='wallet' size={24} />
          <Text style={{ fontSize: 18, marginLeft: 16 }}>Card</Text>
        </View>
        <Text style={{ fontSize: 12, marginLeft: 32, alignSelf: "center", marginTop: 4 }}>XXXXXX 1235 dfasdfasdfas</Text>
      </View>
    </View>

这将是上面代码的输出我写了更多的文字。

答案：

因此，如果您为视图提供固定宽度，例如：

    <View style={{ marginBottom: 40, marginHorizontal: 30, marginTop: 16, alignItems: "center" }}>
      <View style={{ width:'50%' }}>
        <View style={{ flexDirection: "row" }}>
          <Icon name='wallet' size={24} />
          <Text style={{ fontSize: 18, marginLeft: 16 }}>Wallet</Text>
        </View>
        <Text style={{ fontSize: 12, marginLeft: 16, alignSelf: "center", marginTop: 4 }}>{`Available Balance \u20B9 200`}</Text>
      </View>
      <View style={{ marginTop: 10,  width:'50%' }}>
        <View style={{ flexDirection: "row" }}>
          <Icon name='wallet' size={24} />
          <Text style={{ fontSize: 18, marginLeft: 16 }}>Card</Text>
        </View>
        <Text style={{ fontSize: 12, marginLeft: 16, alignSelf: "center", marginTop: 4 }}>XXXXXX 1235</Text>
      </View>
    </View>

输出将是这样的：

在 React Native 中定位 View 的子元素

Positioning the child of View in React Native

user-interface

react-native

react-native-android