React native：文本组件样式

Question

超出父组件边距的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"
  },
});

Answer 1

将flex: 1添加到rowTContext以确保紫色填充可用空间，但不会延伸到父容器之外。

Answer 2

我认为Text组件在flex-direction =＆＃39; row＆＃39;的容器内呈现时出现问题。它不遵循父填充...

在这些情况下，将Text组件包装在View中（给出flex：1）并尝试其工作

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