ReactNative学习实例（二）输入框，滚动条，列表的简单使用

使用这些组件都需要在开头的声明模块进行引入。例子摘自RN中文网

1.文本输入框TextInput:

常用的几个属性有：（1）placeholder:默认显示文字，相当于安卓的hint

（2）onChangeText:这个属性接收一个方法，方法传入一个文本类型的参数也就是当前输入的文字，这也是唯一能够获取当前文本内容的途径。每次输入内容改变时调用

  （3）onSubmitEditing:这个属性也接收一个方法，方法没有参数，在用户按下回车键时调用

代码：

class PizzaTranslator extends Component {  constructor(props) {    super(props);    this.state = {text: ''};  }  render() {    return (      <View style={{padding: 10}}>        <TextInput          style={{height: 40}}          placeholder="Type here to translate!"          onChangeText={(text1) => this.setState({text:text1})}        />        <Text style={{padding: 10, fontSize: 42}}>          {this.state.text}        </Text>      </View>    );  }}

可以看到这里通过onChangeText方法拿到文本并赋值给state对象，然后把这个变量作为另一个文本框的内容显示。通过渲染方法不断的自动调用，就能实现实时显示输入内容。

2.滚动条ScrollView

没什么好说的，和安卓一样，直接套在组件外面就行了。提得一提的是，滚动条套上后会渲染所有里面的组件包括屏幕外的，这是一个缺点。

3.列表ListView:

首先这个组件只渲染屏幕内的内容，这是比较好的一点。

要实现一个列表主要分为两部分，定义他的数据源对象，使用这个对象并返回视图

先看代码：

class ListViewBasics extends Component {  // 初始化模拟数据  constructor(props) {    super(props);    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});    this.state = {      dataSource: ds.cloneWithRows([        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'      ])    };  }  render() {    return (      <View style={{flex: 1, paddingTop: 22}}>        <ListView          dataSource={this.state.dataSource}          renderRow={(rowData) => <Text>{rowData}</Text>}        />      </View>    );  }}

首先在构造器中定义常量新建数据源，这里必须实现一个判断当前组件是否改变的方法，直接返回r1！=r2即可。然后再传入一组数据并把这个数据源传给state变量，方便组件的调用。接下来就是渲染部分了。这里必须实现两个属性，第一个就是数据源，第二个是一个方法，接收数据源的单个对象并返回相应的视图。这里返回了一个显示单个数据的文本。这里根部必须是一个组件，相当于一个布局，而且不能加花括号。