基于图标而不是文本均匀分布空间答案

【问题标题】：space evenly based on icon rather than text基于图标而不是文本均匀分布空间
【发布时间】：2021-12-18 00:03:33
【问题描述】：

我正在尝试将这两个实体均匀地分布在设备上。在以我目前的方式实现它的同时，空间均匀渲染，但它通过单词将其隔开。我希望空间均匀地将其间距基于图标。

我在这里提供了demo 以及下面的代码。

  render() {
    return (
      <View
        style={{
          flexDirection: 'row',
          top: 75,
          justifyContent: 'space-evenly',
        }}>
        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="map-marker-radius-outline"
            color="black"
            size={50}>
          </MaterialCommunityIcons>

          <Text style={{ fontSize: 15 }}>
            WORD
          </Text>
        </View>

        <View style={{ justifyContent: 'center', alignItems: 'center' }}>
          <MaterialCommunityIcons
            name="star-outline"
            color="black"
            size={50}>
          </MaterialCommunityIcons>

          <Text style={{ fontSize: 15 }}>
              WORD WORD
           </Text>
        </View>
      </View>
    );
  }
}

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

如果我正确理解您的问题，您需要两个元素在可用宽度上占据相同的空间。为此，您必须将 flex: 1 添加到您的两个内部视图中

<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>

【讨论】：