美文网首页
React Native 控件样式使用

React Native 控件样式使用

作者: 北疆小兵 | 来源:发表于2019-08-08 17:43 被阅读0次
    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
                    })
                }
    
            />
    
    
    

    相关文章

      网友评论

          本文标题:React Native 控件样式使用

          本文链接:https://www.haomeiwen.com/subject/cjcfjctx.html