ReactNative的天气应用

项目运行效果图：

1.可以输入地址查看天气

2.可以直接使用当前定位地址查看

---

本项目的知识点：

通过props实现组件之间传值

export default class App extends Component {

    _getLocation (latitude,longtitude,city) { console.log('----------地址：');   

          console.log(latitude,longtitude,city);

}

return (

        source={require('./img/timg-2.jpeg')}

        resizeMode='cover'

        style={styles.backdrop}>

export default class locationButton extends Component {

_onPress() {

    this.props.onGetLocation(initialPosition.coords.latitude,

                    initialPosition.coords.longitude,city);

}

render() {

        return (

   

    Use CurrentLocation

        

)

}

在组件使用的地方给组件赋值，就可以在组件中通过this.props使用了

在组件内

_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使用问题

                style={[styles.zipCode,]}

                returnKeyType='go'

                onSubmitEditing={this._handleTextChange.bind(this)}

                value={this.state.zip}/>

在handleTextChange时间中this已经不是本组件，可能造成引用问题，所以需要bind（this）

自定义组件

locationButton就是一个简单的自定义组件

代码git地址