反應原生：文本組件樣式

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

反應原生：文本組件樣式

回答

相關問題