React Native点击按钮修改页面
发布时间:2020-12-15 03:27:38 所属栏目:百科 来源:网络整理
导读:在React Native环境配置成功后,我们创建一个名为 AndroidReact 的react-native项目。作者的react-native版本为0.29 使用react-native init AndroidReact 命令创建react-native项目后,index.android.js或index.ios.js中默认内容为: /** * Sample React Nat
在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); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
- Cocos2dx3.2 Crazy Tetris 绘制不规则方块 遮罩(
- dojo – 以编程方式添加标签
- Sqlite ContentProvider Loader 上下文 对话框
- SQLite数据库环境搭建及测试
- 如何在postgresql 8.3.7中的分区表上使用索引
- XML 的 DOM 解析范例:将XML用作数据库
- 原生Ajax 和jQuery Ajax的区别示例分析
- Cocos2dx Failed to write injected code block
- c# – 如何将PrincipalContext与MVC Web应用程序
- ruby-on-rails – Rails 3.2:需要rake 10.0.3
热点阅读