reactjs - React Native 中视图之间的奇怪差距

Question

我是新手，反应天真，并试图将两个视图放在另一个视图下，但是当我尝试这样做时，视图之间存在很大差距，如下所示。

这无论如何都能够解决这个问题，还是我需要使用平面列表？

这是我的代码。

render() {
  return (
    <>
      <View style={{ flex: 1, flexDirection: "row", height: 130 }}>
        <View style={styles.IconImage}>
          <TouchableOpacity
            onPress={() =>
              Linking.openURL("http://facebook.com/")
            }
          >
            <FontAwesome
              name="location-arrow"
              size={40}
              color={"#E8AA65"}
            />
          </TouchableOpacity>
        </View>
        <View style={{ paddingTop: 50, paddingLeft: 40 }}>
          <Text style={{ fontSize: 20 }}>Find Us</Text>
        </View>
      </View>
      <View style={{ flexDirection: "row", height: 130 }}>
        <View style={styles.IconImage}>
          <TouchableOpacity
            onPress={() =>
              Linking.openURL("http://facebook.com/")
            }
          >
            <Icon
              name={Platform.OS === "ios" ? "ios-settings" : "md-settings"}
              size={40}
              color={"#E8AA65"}
            />
          </TouchableOpacity>
        </View>
        <View style={{ paddingTop: 50, paddingLeft: 40 }}>
          <Text style={{ fontSize: 20 }}>Settings</Text>
        </View>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
     IconImage: {
       paddingTop: 40,
       paddingLeft: 40,
     },  
   });

标签： reactjsreact-native

Answer 1

该问题是由flex:1在您的主视图中提供的。

输出没有flex:1：

剩余的偏移量是由你height和你的padding价值观造成的。

演示：

我创建了一种小吃，您可以在其中玩耍：

https://snack.expo.io/rkUKpLUUU