android - 如何将 View 宽度扩展到 React Native 中的可用可用空间

Question

您好，我正在尝试在 React Native 中设计一个屏幕。如果您在此处看到下面的屏幕截图，则可以看到三个 View 。 a) 图像 b) 出现文本的中心 View c) 圆形 View

我想扩展中心 View 宽度，使其覆盖整个可用空间。我尝试使用 flex 属性来做，但做不到。有谁知道怎么做吗？

<View style={{ flexDirection: "column" }}>
  <View style={{ flexDirection: "row" }}>
    <Icon name="user" size={30} />
    <Text
      style={{
        textAlignVertical: "center",
        marginLeft: 20
      }}
    >
      Ajay Saini
    </Text>
  </View>
  <Text style={{ marginLeft: 50 }}>Hello</Text>
</View>


<View style={{ flexDirection: "row", width: "100%" }}>
  <Icon name="user" size={30} />
  <View
    style={{
      flex: 1,
      flexDirection: "column",
      marginLeft: 20
    }}
  >
    <Text>Williams</Text>
    <Text>
      {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
      ahajkdhfjksahdf
    </Text>
  </View>
  <View
    style={{
      flex: 1,
      flexDirection: "row",
      justifyContent: "flex-end"
    }}
  >
    <TouchableOpacity
      style={{
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.2)",
        alignItems: "center",
        justifyContent: "center",
        width: 30,
        height: 30,
        backgroundColor: "#fff",
        borderRadius: 100
      }}
    />
  </View>
</View>

Answer 1

因为你的循环 View 有 flex: 1，它试图占据所有的空闲空间。此外，中心 View 试图做同样的事情。这会平均分割可用空间，因此从圆形 View 中删除 flex: 1 样式就足够了。

此外，您可以尝试将 justifyContent: 'space-between' 添加到大多数外部 View 。这是简化更复杂设计的绝佳选择。

<View style={{ flexDirection: 'row' }}>
  <Icon name="user" size={30} />
  <View
    style={{
      flex: 1,
      flexDirection: "column",
      marginLeft: 20
    }}
  >
    <Text>Williams</Text>
    <Text>
      {item.text}jhfjks ahfdkjsdh fjkshfjksaddhfjksdahfjkds
      ahajkdhfjksahdf
    </Text>
  </View>
  <View
    style={{
      flexDirection: "row",
      justifyContent: "flex-end"
    }}
  >
    <TouchableOpacity
      style={{
        borderWidth: 1,
        borderColor: "rgba(0,0,0,0.2)",
        alignItems: "center",
        justifyContent: "center",
        width: 30,
        height: 30,
        backgroundColor: "#fff",
        borderRadius: 100
      }}
    />
  </View>
</View>