React Native点击按钮修改页面

前端之家收集整理的这篇文章主要介绍了React Native点击按钮修改页面前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

/**
 * 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);
原文链接:https://www.f2er.com/react/306416.html

猜你在找的React相关文章