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
})
}
/>
网友评论