react-native 入门Demo-- weather(天气查询)

react-native版本: 0.57

  reactnative是一个优秀的跨平台开发解决方案, 但是无奈跟新速度太快, 开发者找到的学习资料往往都是过去的版本, 这会在学习上造成许多不便, 本系列文章的初衷便是在于提供最新的资料给开发者学习.

项目地址: https://github.com/byztl/ReactNativeDemo/tree/master

克隆分支到本地.

$ git clone [email protected]:byztl/ReactNativeDemo.git
$ cd ReactNativeDemo/Weather
$ yarn install
// 然后稍等片刻 弹出二维码以后输入 i 或者 a, 这取决你用什么模拟器
$ expo start

刚启动时的页面

输入上海, 并点击回车

// 数据请求部分, 根据返回的数据, 进行state设置.
handleUpdateLocation = async city => {
    if (!city) return;
    this.setState({ loading: true }, async () => {
      try {
        // city 是城市的拼音 比如 Shanghai
        const locationId = await fetchLocationId(city);
        const { location, weather, temperature } = await fetchWeather(
          locationId
        );
        const weatherInfo = await fetchWeather(
          locationId
        );
        console.log(JSON.stringify(weatherInfo));
        

        this.setState({
          loading: false,
          error: false,
          location,
          weather,
          temperature
        });
      } catch (error) {
        this.setState({
          loading: false,
          error,
        })
      }
    });
  };

主要代码集中在App.js以及component/SearchInput.js
读者可以根据需求自行下载阅读代码, 不懂的地方可以站内留言或者发送问题到我的邮箱
[email protected]