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的项目和按钮添加。两者都执行相同的方法。按钮添加按预期工作，用户在单击时导航到下一页。然而，当ListView的项目被点击时，它没有。颜色发生了变化，就像单击按钮时一样，显示了警报'kyaa'，但它没有进入下一页（即使警报已删除，仍然相同）。

我做错了什么？

Answer 1

你没有调用你的函数，你只是绑定它，因为你使用箭头函数你不需要这样做。你的回调应该是这样的：

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

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

Answer 2

尝试删除警报，然后查看是否有效。如果应用程序需要警报，也许您可以尝试重构：

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

为什么ListView中的TouchableHighlight不能让我进入下一页？

2 个答案: