React Native点击按钮修改页面

在React Native环境配置成功后，我们创建一个名为AndroidReact的react-native项目。作者的react-native版本为0.29

使用react-native initAndroidReact命令创建react-native项目后，index.android.js或index.ios.js中默认内容为：

@H_301_8@/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Text,View } from 'react-native'; class AndroidReact extends Component { constructor(props){ super(props); } render() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> <Text style={styles.instructions}> To get started,edit index.android.js </Text> <Text style={styles.instructions}> Shake or press menu button for dev menu </Text> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,}); AppRegistry.registerComponent('AndroidReact',() => AndroidReact);
添加按钮，在import {AppRegistry...}中添加TouchableHighlight组件：

import React,View,TouchableHighlight
} from 'react-native';

在render()函数中添加TouchableHighlight:

render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started,edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>

        <TouchableHighlight onPress={this._onPressButton}>
          <Text>Button</Text>
        </TouchableHighlight>
      </View>
    );
  }

我们将TouchableHighlight的点击事件交给 _onPressButton函数处理，所以需要在AndroidReact类中添加函数：

_onPressButton(){
    
  }

接下来，我们实现点击按钮，按钮上的文字变为Button {index++}，也就是：Button 0 点击变为 Button 1，再点击变为Button 2.

我们首先在constructor(props)函数中添加AndroidReact内部变量index：

constructor(props){
    super(props);
    this.state = {index:0};
  }

在_onPressButton函数中改变index的值：

_onPressButton(){
    this.setState({index: this.state.index + 1});
  }

然后在视图中加入index的值：

<TouchableHighlight onPress={this._onPressButton}>
          <Text>Button {this.state.index}</Text>
</TouchableHighlight>

到这一步，如果执行react-native run-ios或react-native run-android，则会报错。

原因是_onPressButton()函数中找不到this.state.index。this应该指向AndroidReact类，由于_onPressButton()函数找不到this的指向导致了错误的发生。

所以，我们需要给_onPressButton()绑定this指针。在constructor函数中为_onPressButton()绑定：

constructor(props){
    super(props);
    this.state = {index:0};
    this._onPressButton = this._onPressButton.bind(this);
}

效果，点击前：

点击后：

完整代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,TouchableHighlight
} from 'react-native';




class AndroidReact extends Component {
  constructor(props){
    super(props);
    this.state = {index:0};
    this._onPressButton = this._onPressButton.bind(this);
  }

  componentDidMount(){
    
  }

  _onPressButton(){
    this.setState({index: this.state.index + 1});
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started,edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>

        <TouchableHighlight onPress={this._onPressButton}>
          <Text>Button {this.state.index}</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,() => AndroidReact);

React Native点击按钮修改页面

猜你在找的React相关文章