项目运行效果图：
1.可以输入地址查看天气
2.可以直接使用当前定位地址查看
本项目的知识点：
通过props实现组件之间传值
export default class App extends Component {
_getLocation (latitude,longtitude,city) { console.log('----------地址：');
console.log(latitude,longtitude,city);
}
return (
<ImageBackground
source={require('./img/timg-2.jpeg')}
resizeMode='cover'
style={styles.backdrop}>
<Location onGetLocation = {this._getLocation.bind(this)}/>
</ImageBackground>
export default class locationButton extends Component {
_onPress() {
this.props.onGetLocation(initialPosition.coords.latitude,
initialPosition.coords.longitude,city);
}
render() {
return (
<TouchableHighlight onPress={this._onPress.bind(this)}>
<View style={styles.locationButton}>
<Text style={[styles.title]}>Use CurrentLocation
</Text>
</View>
</TouchableHighlight>
)
}
在组件使用的地方给组件赋值，就可以在组件中通过this.props使用了
<Location onGetLocation = {this._getLocation.bind(this)}/>
在组件内
_onPress() {
this.props.onGetLocation(initialPosition.coords.latitude,
initialPosition.coords.longitude,city);
}
了解ReactNative组件生命周期
* Mounting
constructor()
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()
*Updating
componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
*Unmounting
componentWillUnmount()
*Error Handling
componentDidCatch()
初始化组件状态state
constructor(props) {
super(props);
this.state = {
zip: '北京市',
forecast:null,
};
}
解决this使用问题
<TextInput
style={[styles.zipCode,]}
returnKeyType='go'
onSubmitEditing={this._handleTextChange.bind(this)}
value={this.state.zip}/>
在handleTextChange时间中this已经不是本组件，可能造成引用问题，所以需要bind（this）
自定义组件
locationButton就是一个简单的自定义组件
