RN教程之按钮与state关键字

alltolove

1. import React, { Component } from 'react';
   
2. import {
   
3.   AppRegistry,
   
4.   View,
   
5.   Text,
   
6.   TouchableHighlight
   
7. } from 'react-native';
   
8. 
   
9. export default class myreact extends Component {
   
10.   constructor(props) {
    
11.     super(props);
    
12.   
    
13.     this.state = {action:false};
    
14.   }
    
15.   render() {
    
16.     return (
    
17.             <View style={{flex:1}}>
    
18.       <TouchableHighlight
    
19.       onPress={()=>this.setState({action:!this.state.action})}
    
20.       style={{backgroundColor: 'gray',width: 150,height: 90}}
    
21.       >
    
22.       <Text>press me</Text>
    
23.       </TouchableHighlight>
    
24.       {
    
25.         this.state.action?<Text style={{fontSize: 50,marginTop: 100}}>hello</Text>:null
    
26.       }
    
27.       </View>
    
28.     );
    
29.   }
    
30.   
    
31. }
    
32. 
    
33. AppRegistry.registerComponent('myreact', () => myreact);
    

复制代码

TouchableHighlight 控件：点击后背景色变暗

onPress 属性：设置一个箭头函数来调用点击事件

this.state属性：在构造函数里先初始化

this.setState 函数：改变state属性的值

这里state必须是一个json类型，TouchableHighlight标签里不止能放Text控件，还可以放任何其他控件。以上代码我设置了个state属性，然后在onPress事件里给它取反，再在底下放了一个三元操作符的变量，就是如果this.state.action是真就显示hello，如果是假就显示空，显示效果为下图：