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变量，方便组件的调用。接下来就是渲染部分了。这里必须实现两个属性，第一个就是数据源，第二个是一个方法，接收数据源的单个对象并返回相应的视图。这里返回了一个显示单个数据的文本。这里根部必须是一个组件，相当于一个布局，而且不能加花括号。