1

我正在尝试使用适用于 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”，但不会转到下一页（即使删除了警报，仍然相同）。

我做错了什么？

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 回答