为什么 ListView 中的 TouchableHighlight 不让我转到下一页？

Question

我正在为 Android 尝试使用 React Native（版本 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。两者执行相同的方法。按钮添加按预期工作，用户在单击时导航到下一页。然而，当 ListView 的项目被点击时，它却没有。就像单击按钮时颜色发生变化，显示警报 'kyaa'，但它不会转到下一页（即使警报已删除，仍然是一样的）。

我做错了什么？

Answer 1

尝试删除警报，看看它是否有效。如果应用程序需要警报，也许您可以像这样尝试重构一下：

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

Answer 2

您不是在调用您的函数，您只是在绑定它，您不需要这样做，因为您使用的是箭头函数。您的回调应如下所示：

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

bind 所做的是创建一个新函数，该函数的作用域是您作为第一个参数传递的内容（在本例中，是您实例化行的组件），但它不会调用本身发挥作用。当从不同的范围调用时，箭头函数不会替换范围，因此您不需要进行任何类型的绑定。

为什么 ListView 中的 TouchableHighlight 不让我转到下一页？

Why won't the TouchableHighlight inside ListView let me go to the next page?

react-native

react-native-listview