反应原生：文本组件样式

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" 
    }, 
});

来源

2017-06-11 jiexishede

添加flex: 1以rowTContext，保证紫罢了可用空间，但不延伸过父容器。

来源

2017-06-11 16:59:22

我认为这是当它与弯曲方向的容器内呈现在文本组件中的问题='row'.It不服从父母垫衬...

在这些情况下，您的包裹文本组件在视图内（给flex：1）并尝试其工作

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

来源

2017-06-12 05:28:28

反应原生：文本组件样式

回答

相关问题