React.js
Pocket

React Nativeメモ

前回こんな記事を書いたついでにReact Nativeの方でも試してみました。

WP REST API v2を使って記事一覧をReactで取得してみる

コードは以前書いたGitHub API使うやつとほぼ一緒なんですが、ちょっと詰まったとこあったのでその辺の備忘録。

【React】React NativeでGitHubリポジトリ一覧を表示してみる

全体のコード

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

 import React, { Component } from 'react';
 import {
   AppRegistry,
   StyleSheet,
   ListView,
   Text,
   View
 } from 'react-native';

 var REQUEST_URL = 'https://blog.mismithportfolio.com/wp-json/wp/v2/posts?per_page=5';

 class reactapprn extends Component {
   constructor(props) {
     super(props);
     this.state = {
       items: new ListView.DataSource({
         rowHasChanged: (row1, row2) => row1 !== row2,
       }),
       loaded: false,
     };
   }
   componentDidMount() {
     this.fetchData();
   }
   fetchData() {
     fetch(REQUEST_URL)
         .then((response) => response.json())
         .then((responseData) => {
             this.setState({
           items: this.state.items.cloneWithRows(responseData),
           loaded: true,
             });
         })
         .done();
   }
   render() {
     var site = this.state.loaded
     if (!site) {
       return this.renderLoadingView();
     }

     return (
       <ListView dataSource={this.state.items} renderRow={this.renderItem} />
     );
   }
   renderLoadingView() {
     return (
         <View style={styles.container}>
             <Text>
                 Loading posts...
             </Text>
         </View>
     );
   }
   renderItem(item) {
     return (
       <View>
         <Text>{item.title.rendered}</Text>
       </View>
     );
   }
 }

 const styles = StyleSheet.create({
   container: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   welcome: {
     fontSize: 20,
     textAlign: 'center',
     margin: 10,
   },
   instructions: {
     textAlign: 'center',
     color: '#333333',
     marginBottom: 5,
   },
 });

 AppRegistry.registerComponent('reactapprn', () => reactapprn);

GitHub APIのURLを書き換えて、WP REST APIのjsonに合うようにコードをちょっと書き換えただけなんですが、iOSシュミレーター画面が真っ赤に(つまりエラー…)

エラーメッセージは「Network request failed」。GitHub APIは問題なくできたのに何で…。

「Network request failed」でググってみるとめっちゃstackoverflowが。みんなこれで詰まってるのか。。。なんかFetchと関係あるみたいですね。

最初はこれを試してみましたがうまくいかず

ReactNativeのfetchがテザリング中エラーになる

Qiita @tanishi

最終的にはhttp通信をデフォルトでブロックするATS(App Transport Security)というのが影響していると分かり、ググり直して以下の記事をやってみました。Xcodeはほとんど触ったことないですが、これ見ながらやればいけました。

Xcode7でATSを即座に無効にする方法(これが一番楽だと思います)

Qiita @tonkotsuboy_com

再度、シュミレーターを立ち上げたらうまく取得できてました。(またスタイルは当ててない)

React Nativeで記事一覧

React NativeとWP REST APIを使えば、自分のブログをアプリ化できそうですね!もうちょっと作りこんでみます。

実際のコードはこちら

https://github.com/mismith0227/react-app-rn/commit/cfb3deb77420d4e9223ea3f82e9c280964d007f5

Pocket