React Native如何避免Text组件撑宽容器 容器宽度由其他子元素决定

解决方法 #

核心原理是让Text组件继承父容器已有的宽度，不触发父容器的宽度重新计算，修改如下：

修改点：

• 移除Text组件上无效的flexWrap: "wrap"属性（flexWrap是flex容器专属属性，作用于Text不生效）
• 将bubble2样式中的alignItems: "center"修改为alignItems: "stretch"，让子元素默认占满父容器横向宽度
• 若需要文本居中展示，可给Text添加textAlign: "center"样式

修改后完整代码：

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={[styles.bubble2, {}]}>
          <View
            style={{ width: 100, height: 100, backgroundColor: "#ff0000" }}
          />
          <Text
            style={{
              fontSize: 18,
              backgroundColor: "#00ff00",
              textAlign: "center"
            }}
          >
            Some random text goes here
          </Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#fff",
    paddingTop: 20,
    alignItems: "center",
    justifyContent: "center"
  },
  bubble2: {
    backgroundColor: "orange",
    paddingHorizontal: 20,
    alignItems: "stretch",
    justifyContent: "center"
  }
});

如果你不想修改bubble2的alignItems属性，也可以用包裹层方案：给Text外层套一个View，设置样式为flexShrink: 1; width: 100%即可，无需修改其他代码。

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