在index.ios.js文件中注冊并導(dǎo)入組件WeatherProject
/**
* Sample React Native App
* index.ios.js
* @flow
*/
import React from 'react-native';
import {
AppRegistry,
} from 'react-native';
import WeatherProject from './WeatherProject';
AppRegistry.registerComponent('AwesomProject', ()=> WeatherProject);
在WeatherProject組件中設(shè)置相關(guān)的內(nèi)容：
/**
* Sample React Native App
* WeatherProject.js
* @flow
*/
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TextInput
} from 'react-native';
export default class AwesomProject extends Component {
constructor(props){
super(props);
this.state = {
text:''
};
}
_handleTextChange (event) {
this.setState({
text:event.nativeEvent.text
});
}
render() {
return (
<View style = {styles.container}>
<Text style = {styles.welcome}>
you input {this.state.text}.
</Text>
<TextInput style = {styles.input} onSubmitEditing = {() => this._handleTextChange()} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#F5FCFF',
},
welcome:{
fontSize:20,
textAlign:'center',
margin:10,
},
input:{
fontSize:20,
borderWidth:2,
height:40,
},
});
