时间戳

首页 > 解决方案 > 如何绑定 TouchableOpacity 的值

react-native - 如何绑定 TouchableOpacity 的值

问题描述

我是 react-native 的新手，正在尝试开发一个可以在不同屏幕之间导航的应用程序。为此，我正在使用导航。但问题是当多个 TouchableOpacity 组件被推入一个数组然后使用函数返回到我的视图时，导航器正在获取循环的最后一个变量值的参数值。

// my function to push dynamic blocks in render function
    myFunction() {
      var myelement = [];
      for ( var i = 0 ; i < 2 ; i++ )
      {
// loop goes twice pushing 2 TouchableOpacity blocks setting dynamic i values
        myelement.push(
          <TouchableOpacity
            activeOpacity={1}
            onPress={this.props.navigation.navigate('Screen2', {
              mykey: `value${i}`,
            })>
            <Text>Hello</Text>
          </TouchableOpacity>
        );
      }
      return myelement;
    }

当单击第一个 TouchableOpacitiy 块时（因为循环只进行了两次，只创建了 2 个块），i 的值应该为 0。

但取而代之的是它的最终值 i = 1

标签： react-native

解决方案

我认为这可以解决您的问题：

myFunction() {
  const myElement = [];

  const newElement = [0,1].map(el => (
    <TouchableOpacity
      activeOpacity={1}
      onPress={() => this.props.navigation.navigate('Screen2', {
          mykey: `value${el}`,
      })>
      <Text>Hello</Text>
    </TouchableOpacity>
  ));
  return myElement.push(newElement);
}

推荐阅读