React Native之旅02－控件View

大概浏览了一下ReactNative的控件，发现他的控件还是挺多的。下面就是我用最基本的View,Image,Text和TextInput。

1、View简单用法

view是一个支持Flexbox布局、样式、一些触摸处理、和一些无障碍功能的容器，并且它可以放到其它的视图里，也可以有任意多个任意类型的子视图。不论在什么平台上，View都会直接对应一个平台的原生视图

主要属性用法

alignItems enum('flex-start', 'flex-end', 'center', 'stretch')
//里控件的对齐方式
flex number
//所占的比例
flexDirection enum('row', 'column')
//方向

 <View style={[styles.flexRow,styles.marginLeftAndRight8]}>
    <Text style={styles.flex1}>
        立即注册
    </Text>
    <Text style={[styles.flex1,styles.textRight]}>
        忘记密码
    </Text>
</View>

这里的立即注册和忘记密码就是横向布局各占flex1，也就是各占一半

2、Image简单用法

一个用于显示多种不同类型图片的React组件，包括网络图片、静态资源、临时的本地图片、以及本地磁盘上的图片（如相册）等

主要属性用法

resizeMode enum('cover', 'contain', 'stretch')
1.cover:在保持图片宽高比的前提下缩放图片，直到宽度和高度都大于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全覆盖甚至超出容器，容器中不留任何空白。
2.contain: 在保持图片宽高比的前提下缩放图片，直到宽度和高度都小于等于容器视图的尺寸（如果容器有padding内衬的话，则相应减去）。译注：这样图片完全被包裹在容器中，容器中可能留有空白
3.stretch: 拉伸图片且不维持宽高比，直到宽高都刚好填满容器。<br />
source {uri: string}, number
uri是一个表示图片的资源标识的字符串，它可以是一个http地址或是一个本地文件路径（使用require(相对路径)
来引用）。

  <View style={styles.center}>
    <Image style={[styles.margin8,styles.logo]}
           source={require('./image/sina_logo.png')}/>
</View>

3、TextInput简单用法

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

主要属性用法

keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search')
决定弹出的何种软键盘的，譬如numeric（纯数字键盘）。<br />
android的属性underlineColorAndroid
文本框的下划线颜色(译注：如果要去掉文本框的边框，请将此属性设为透明transparent)。<br />
secureTextEntry
如果为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全。默认值为false。

<TextInput
    style={[styles.marginLeftAndRight8,styles.textInput]}
    placeholder='请输入密码'
    secureTextEntry={true}
    underlineColorAndroid="transparent"
/>

最后的效果图是这样的：

ps：有点丑，请见谅

代码如下

<View style={styles.base}>    
  <View style={styles.center}>        
    <Image style={[styles.margin8,styles.logo]}               
                source={require('./image/sina_logo.png')}/>          
  </View>    
  <View style={styles.marginTop10}>        
    <TextInput            
        style={[styles.margin8,styles.textInput]}  
                  placeholder='请输入用户名'    
              underlineColorAndroid="transparent"        />
        <TextInput
            style={[styles.marginLeftAndRight8,styles.textInput]}
            placeholder='请输入密码'
            secureTextEntry={true}
            underlineColorAndroid="transparent"
        />
    </View>
    <View style={[styles.margin8,styles.submitView]}>
        <Text style={styles.submit}>
            登录
        </Text>
    </View>
    <View style={[styles.flexRow,styles.marginLeftAndRight8]}>
        <Text style={styles.flex1}>
            立即注册
        </Text>
        <Text style={[styles.flex1,styles.textRight]}>
            忘记密码        
      </Text>
    </View>
</View>

样式：

base:{
    backgroundColor: '#E3E3E3',
    flex: 1, 
   flexDirection: 'column',
},
flexRow:{
    flexDirection:'row'
},
flex1:{
    flex:1
},
flex2:{
    flex:2
},
center:{
    alignItems:'center'
},
textRight:{
    textAlign:'right',
},
margin8:{
   margin:8,
},
marginTop10:{
    marginTop:10,
},
marginLeftAndRight8:{
    marginLeft:8,
    marginRight:8,
},
logo: {
    width: 200,
    height: 100,
    resizeMode: 'contain',
    marginTop:50,},
textInput:{
    backgroundColor: '#ffffff',
    height:40,
},
submitView: {
    paddingTop: 8,
    paddingBottom: 8,
    backgroundColor: '#88bc39',
    marginTop:14,
},
submit: {
    color: "#ffffff",
    fontSize: 16,
    textAlign: 'center',
},

控件具体属性以及其它用法请参考React Native官网或者React Native 中文网
<br />

欢迎留言或私信交流，谢谢

转载请注明转载地址：http://www.jianshu.com/p/2e3d74757894
React Native之旅02－控件View