1

Android用のReact Native (ver. 0.37.0)を試して、簡単に学べるアプリを作ろうとしています。次のページに移動するボタンを正常に作成した後、ユーザーが ListView のアイテムをクリックして次のページに移動するようにします (オンライン ショップでアイテムをクリックすると、次のページに移動してアイテムの情報が表示されるように)。これが私のコードです：

      <View>

        // ListView
        <ListView contentContainerStyle={styles.list}
            dataSource={this.state.dataSource}
            enableEmptySections={true}
            renderRow={(rowData) => 
                <TouchableHighlight 
                  style={styles.listviewContainer}
                  onPress={() => {
                      Alert.alert('kyaa');
                      this.gotoItemPage.bind(this);
                    }} 
                  >
                    <View>
                        /*some Text and Image*/
                    </View>
                </TouchableHighlight>
            }
        />

        // Button Add
        <TouchableOpacity onPress={this.gotoItemPage.bind(this)} >
          <Image
            style={styles.button}
            source={/*some source*/}
          />
        </TouchableOpacity>

      </View>

上記のコードには、ListView の item と Button Add の 2 つのクリック可能なものがあります。どちらも同じメソッドを実行します。ボタンの追加は意図したとおりに機能し、クリックするとユーザーは次のページに移動します。しかし、ListView のアイテムがクリックされても、クリックされません。ボタンをクリックしたときと同じように色が変わり、アラート「きゃあ」が表示されますが、次のページに移動しません（アラートを削除しても同じです）。

私は何を間違えましたか？

4

2 に答える 2

3

関数を呼び出しているのではなく、バインドしているだけです。アロー関数を使用しているため、これを行う必要はありません。コールバックは次のようになります。

<TouchableHighlight 
                  style={styles.listviewContainer}
                  onPress={() => {
                      Alert.alert('kyaa');
                      this.gotoItemPage();
                    }}>
//...

最初のパラメーターとして渡すものbind(この場合は、行をインスタンス化するコンポーネント) のスコープを持つ新しい関数を作成しますが、関数自体は呼び出しません。アロー関数は、別のスコープから呼び出されたときにスコープを置き換えないため、何らかのバインディングを行う必要はありません。

于 2016-11-30T10:09:14.297 に答える
0

アラートを削除してみて、それが機能するかどうかを確認してください。アプリにアラートが必要な場合は、次のように少しリファクタリングしてみてください。

Alert.alert(
      'Alert Title',
      'Main message of the alert',
       [{text: 'OK', onPress: this.gotoItemPage.bind(this) }]
     )

いずれにせよ、コンポーネント コンストラクターで関数をバインドしてみてください。

https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.ii36rho3r

于 2016-11-30T10:06:17.567 に答える