React Native 控件样式使用

container:{
 flexDirection:'row', //并排显示 row:item从左到右排列  column:从上到下排列 默认为 column
 backgroundColor:'#eae7ff',
 flex:1,
 justifyContent:'space-around', //flex-start:靠上，默认为flex-start,center:居中    flex-end:靠底部显示 space_between:空间均分  space-around
 alignItems:'center',  //flex-start:靠左显示, center:居中显示,flex-end: 靠右边显示
 margin:30,
 borderWidth:1,  //边框宽度
 borderColor:'#6435c9',
 borderRadius:16,  //边框圆角

 shadowColor:'#FFC125', //阴影颜色
 shadowOpacity:0.6, //阴影不透明度
 shadowRadius:20, //阴影范围
 shadowOffset:{ //阴影偏移
    height:1,
    width:0
 }
}
 ,
 title:
 {
 fontSize:26,   //字体大小
 color:'#6435c9',
 textAlign:'center', //对齐方式 left,center,right 注意是没有top,bottom的
 fontStyle:'italic', //字体风格 italic:斜体
 letterSpacing:2, // 字符间距
 lineHeight:33,   //字体高度
 fontFamily:'Helvertuca Neue',
 fontWeight:'900',  //有normal, bold 或者是100-900的数字
 textDecorationLine:'underline', //underline:下划线,  line-through:删除线
 textDecorationStyle:'dotted', //下划线的风格, solid:实线  double:双实线  dotted:点线 dashed:虚线
       
}

alignSelf:'flex-start' 在外层设置了alighItem的情况下，可以单独对某个控件设置对其方式

• 显示图片

加载本地图片:
 <Image style={styles.iamge} source={require('./icon.jpg')}/> 
 加载网络图片:
  <Image style={styles.logo} source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}/>

在RN中没有单独设置图片背景的属性，需要用ImageBackground

<ImageBackground style={styles.backgroundIamge} source={require('./02.jpg')}>
                   
<View style={styles.overlay}>
    <Text style= {styles.overlayHeader}> 机器人总动员</Text>
    <Text style= {styles.overlaySubHeader}> Wall .E(2008)</Text>
</View>
</ImageBackground>

• Listview显示列表

• TextInput使用

<TextInput style={{borderColor:'red', height:100}} 
            placeholder={'我是占位文字'}
            multiline={true}
            secureTextEntry={false}
            onChangeText = {
                (inputText) => this.setState({
                    text:inputText
                })
            }

        />