React Native：文本组件样式答案

【问题标题】：React native: Text component styleReact Native：文本组件样式
【发布时间】：2017-06-11 16:39:13
【问题描述】：

Text 组件字超出父组件边距并忽略祖父填充。在我看来，Text 内容应该在父组件中。

 render() {
    return (
      <View style={styles.container}>
        <View style={styles.importV}>
          <View style={styles.serVRow}>
            <Image
              style={styles.serILeft}
              source={require('./img/personYellow.png')}/>
            <Text
              style={styles.rowTContext}>Why these words is beyond the serVRow style View. The serVRow style View.</Text>
          </View>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black',
  },
  hollowWordText: {
    color: 'white',
    fontSize:52,
  },
  importV: {
    width: width,
    backgroundColor: '#fff',
    marginBottom: 7,
    padding: 15,
  },
  serVRow: {
    flexDirection: 'row',
    marginRight: 3,
    paddingBottom: 8,
    backgroundColor:'#f00'
  },
  serILeft: {
    marginRight: 10,
    alignSelf:'center',
  },
  rowTContext: {
    color: "#000",
    fontSize: 14,
    lineHeight: 20,
    backgroundColor:"purple"
  },
});

【问题讨论】：

标签： css react-native

【解决方案1】：

将flex: 1 添加到rowTContext 以确保紫色填充可用空间但不会超出父容器。

【讨论】：

【解决方案2】：

我认为 Text 组件在使用 flex-direction='row' 的容器内渲染时存在问题。它不遵守父填充...

在这些情况下，将您的 Text 组件包装在 View(give flex:1) 中并尝试其是否正常工作

<View style={{flex:1}} >
 <Text>your text here</Text>
</View>

【讨论】：