react native flexBox布局及margin、pa

前言：本文最好在在理解了flextBox和margin、padding后观看。这篇是对margin、padding解释比较详细和直观的，而这篇是对flex的解释。

问题场景：距屏幕左边距16显示title，距title右边距16显示content,且content的右边距屏幕16。理想的显示应该是图2的这个样子：  但实际显示content却没有显示出来，见图1。原因是对于content的style我们并没有说明具体的宽度，虽然我们设置了marginLeft和marginRight,但是并没有按照我们理想的要求显示出来，原因就是我们没有说明content的宽度。我们可以将下面的styles中content的flex设置为1就可以了，即使我们的content为空字符串但content依然可以展示出来（见图2）

图1：

图2：

下面是错误代码

render(){ return( <View style={styles.container}>  

     <Text style={styles.title}>{'标题一'}</Text>

     <Text style={styles.content}>''</Text>

</View>) }

const styles = StyleSheet.create({

 container:

{minHeight:44,backgroundColor:'white',flexDirection:'row'},

 title: {fontSize:FontSize.P1,width:92,color:'#191919',marginLeft:16,backgroundColor:'yellow',},

content:{marginLeft:16,marginRight:16,fontSize:FontSize.P1,color:'#191919',height:40,backgroundColor:'red',},

})