React Native矩形框内如何实现SVG与两个TextView在同一行展示

调整方案 #

你原来的布局问题出在内外对齐规则混淆、缺少元素间距、固定高度限制三个点，按下面修改即可：

• 给橙色边框的容器去掉justifyContent: "center"，改成justifyContent: "flex-start"，同时加上marginHorizontal: "auto"实现容器自身在父级水平居中
• 给SVGImg组件加marginRight样式（数值可根据视觉效果调整），实现和文本的间距
• 删掉容器的固定height: 56，换成minHeight: 56，避免文字换行时溢出被截断
• 删掉React Native不支持的boxSizing属性

修改后完整代码：

<View style={{ width: "100%", minHeight: 100, paddingHorizontal: 17}}> 
  <View
    style={{
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "flex-start",
      flexWrap: "wrap",
      minHeight: 56,
      width: 312,
      marginHorizontal: "auto",
      borderWidth: 1,
      borderColor: "#FF6D00",
      borderRadius: 2,
      marginTop: 24,
      paddingHorizontal: 12,
      paddingVertical: 10
    }}
  >
    <SVGImg width={10} height={10} style={{ marginRight: 8 }} />
    <Text h7 >
      Feature is not there for this particular page.
      <TouchableOpacity
        onPress={() => this._onClickWhatisit()}
      >
        <Text h7>
          What is it 
        </Text>
      </TouchableOpacity>
    </Text>
  </View>
</View>

内容的提问来源于stack exchange，提问作者miranal