In React, components manage their own state. In this lesson, we‘ll walk through building a component which manages it‘s own state as well as using TextInput and TouchableHighlight to handle touch events.
import React, { Component, PropTypes } from ‘react‘;
import { View, Text, StyleSheet, TextInput, TouchableHighlight, ActivityIndicatorIOS } from ‘react-native‘;
var style = StyleSheet.create({
mainContainer: {
flex: 1,
padding: 30,
marginTop: 65,
flexDirection: ‘column‘,
justifyContent: ‘center‘,
backgroundColor: ‘#48BBEC‘
},
title: {
marginBottom: 20,
fontSize: 25,
textAlign: ‘center‘,
color: ‘#fff‘
},
searchInput: {
height: 50,
padding: 4,
marginRight: 5,
fontSize: 23,
borderWidth: 1,
borderColor: ‘white‘,
borderRadius: 8,
color: ‘white‘
},
buttonText: {
fontSize: 18,
color: ‘#111‘,
alignSelf: ‘center‘
},
button: {
height: 45,
flexDirection: ‘row‘,
backgroundColor:‘white‘,
borderColor:‘white‘,
borderWidth:1,
borderRadius:8,
marginBottom:10,
alignSelf:‘stretch‘,
justifyContent:‘center‘
}
});
export default class Main extends Component{
constructor(props){
super(props)
this.state = {
username: ‘‘,
isLoading: false,
error: false
};
}
handleChange(event){
this.setState({
username: event.nativeEvent.text
})
}
handleSubmit(event){
//update our indicatorIOS spinner
this.setState({
isLoading: true
});
console.log(‘submit‘, this.state.username);
//fetch data from github
//reroute to the next passing that github informaiton
}
render(){
return (
<View style={style.mainContainer}>
<Text style={style.title}>Search for a Github User</Text>
<TextInput
style={style.searchInput}
value={this.state.username}
onChange={this.handleChange.bind(this)}
/>
<TouchableHighlight
style={style.button}
onPress={this.handleSubmit.bind(this)}
underlayColor="white"
>
<Text style={style.buttonText}>SEARCH USER</Text>
</TouchableHighlight>
</View>
)
}
}

<TextInput style={style.searchInput} value={this.state.username} onChange={this.handleChange.bind(this)} />
Search box, once value changed, set current username state.
<TouchableHighlight style={style.button} onPress={this.handleSubmit.bind(this)} underlayColor="white" >
Search button, a touch button, so not onClick event but onPress event.
underlayColor: When touch, change background color to white color.
[React Native] State and Touch Events
原文:http://www.cnblogs.com/Answer1215/p/5700004.html