React NativeとExpoで作るiOS・Androidアプリ開発入門 - 3/3 Kindle版 のサンプルアプリを修正

ナカノヒトシさんのKindle本で学ぶサンプルアプリケーションはなかなかのもので勉強にもこれから作ろうと思うアプリの見本にもなるのですが、react-native-elementsがアップデートしたことによりそのままでは動かない。

React NativeとExpoで作るiOS・Androidアプリ開発入門 - これ一冊でストアリリースまで進める本格的入門書 - 3/3

例

FormInput

前回の記事で書いたとおり。

Avatar

<ListItem>のプロパティとしてroundAvatarとavatar={item.user.profile_image_url}ではダメで、次のように書く。

<ListItem
    onPress={()=>{this.props.navigation.navigate('WebViewPage', {url:item.url,title:item.title})}
    }
    key={item.id + ":" + item.user.id}
    title={item.title}
    leftAvatar={{
      title: item.title,                           
      source: {uri: item.user.profile_image_url},
      rounded: true
    }   

リスナー

サンプルコードではリスナーされる関数が発火せず。

    componentDidMount() {
        this.props.navigation.addListener('didFocus', this.componentDidFocus()
        this.loadTags();
    }

    componentDidFocus() {
       this.loadTags();
   }

以下のようにした。

    componentDidMount() {
        this.props.navigation.addListener('didFocus', () => this.loadTags()) // 変更。
        this.loadTags();
    }
    /*
    componentDidFocus()を削除
    */    

KeywordForm.js

this.refs["form-input"].clearText()
では動かず、
his.refs["form-input"].clear()
で正解

<Input ref="form-input" label="新しく登録するキーワード" onChangeText={this.onChangeInputText} />
でInputのValueを関数に渡せず、
<Input ref="form-input" label="新しく登録するキーワード" onChangeText={(text)=>{this.setState({input: text})}} />
で、渡せた。

他にもあっただろうか？

いくつか自分の見落としもあると思うがとりあえず修正して動かせたソースコードをGithubにアップしたのでご参考に。