ReactNative学习——常用控件使用

1、Text

相当于Android中的TextView，用于显示文本

Text属性官方文档：http://reactnative.cn/docs/0.47/text.html#content

2、TextInput

相当于EditText控件，用户接收用户输入的信息

常用属性：

其他属性可参照官方文档：http://reactnative.cn/docs/0.47/textinput.html#content

autoCapitalize

首字母自动大写，Android上好像没什么效果，我在模拟器上运行的，并没看到效果

• none：不自动变为大写
  
• sentences：将每句话的首字母自动改成大写
  
• words：将每个单词的首字母自动改成大写
  
• characters：将每个英文字母自动改为大写
  

placeholder

在没有输入任何内容时，显示的占位字符，等同于android中的android:hint属性

value

设置内容，等同于android中的android:text属性

placeholderTextColor

占位符文字颜色，等同于android中的android:textColorHint属性

password

设置为true后，输入的内容将以私密形式显示，在android中好像没效果；要对输入内容做私密显示用secureTextEntry={true}属性
等同于android中的android:password="true"

maxLength

限制最大可输入内容长度，和android中的maxLength一样，使用时有需要注意，值应该用{}包起来，否则会报错

 maxLength={5}

keyboardType

设置键盘样式，等同于android中的android:inputType

• default
• numeric 数字键盘
• email-address
• phone-pad

onChange

文字变化监听，回调方法不带文字内容

onChangeText

文字变化监听,回调方法带文字内容

onEndEditing

输入状态结束时回调

3、Image

相当于android中的ImageView控件

常用属性：

Image属性官方文档：http://reactnative.cn/docs/0.47/image.html#content

source

图片源，等同于android中的src，但功能比ImageView更强大，可接受来自网络或者本地资源图片

uri：可以加载网络图片

require:加载本地图片，相对路径

android下可以支持png、jpg、jpeg、bmp、gif、webp格式图片，需要添加下面的第三方库

dependencies {
  // 如果你需要支持Android4.0(API level 14)之前的版本
  compile 'com.facebook.fresco:animated-base-support:1.0.1'

  // 如果你需要支持GIF动图
  compile 'com.facebook.fresco:animated-gif:1.0.1'

  // 如果你需要支持WebP格式，包括WebP动图
  compile 'com.facebook.fresco:animated-webp:1.0.1'
  compile 'com.facebook.fresco:webpsupport:1.0.1'

  // 如果只需要支持WebP格式而不需要动图
  compile 'com.facebook.fresco:webpsupport:1.0.1'
}

4、Button

这个没什么好说的，和android中的Button没多大区别

Button属性官方文档：http://reactnative.cn/docs/0.47/button.html#content

5、ListView

和Android中ListView一样，用于展示数据，但使用上有很大差异

import React, {Component} from 'react';
import {ListView, Text, StyleSheet} from 'react-native';

class ListViewDemoActivity extends React.Component {
    constructor(props) {
        super(props);

        //数据源
        let datas = ["列表数据1","列表数据2","列表数据3","列表数据4"];

        //设置notifyDataSetChanged
        let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

        //dataSource就是遍历出的数组元素
        this.state = {
            dataSource: ds.cloneWithRows(datas),
        };
    }

    render() {
        return (
            <ListView
                initialListSize={3}
                dataSource={this.state.dataSource}
                renderRow={(rowData) => <Text style={styles.itemText}>{rowData}</Text>}
            />
        );
    }
}

let styles = StyleSheet.create({
    itemText:{
        marginTop:10,
        backgroundColor:"#ff0000",
        paddingTop:15,
        paddingBottom:15,
        textAlign:"center",
        color:"#ffffff"
    }
})


export default ListViewDemoActivity

附：Demo地址：https://github.com/cenxiaoping/ReactNativeDemo