Question

我尝试使用谷歌搜索，但是由于英语不是我的最大技能，因此我发现Google很难找到正确的东西。我已经尝试过自己解决此问题的方法，但是我想知道是否有更好的方法可以解决此问题。

情况：

我有一个json对象，想在其中呈现值，因此我映射了值并将其呈现在组件中。我只需要调用一次该组件，它就会根据json对象中有多少个对象多次渲染自身。

现在，当我在一个特定的渲染实例上触发onPress函数时，它将为每个渲染实例触发。

所需的情况：

当我有多个呈现的组件实例，并且在单个onPress上触发onPress时，它仅应为该实例触发。

代码：

我正在执行get请求，响应返回一个json对象：

{
"objects": [
    {
        "name": "Alarm chauffeurs@ON=100",
        "object_id": 1,
        "input_value": 0,
        "last_changed": "2019-03-08T14:30:54",
    }, ...

接下来，我将这些值映射到我的组件：

      let cards = this.state.dataSource.objects.map((val, key) => {
      return (
         <Animated.View key={key} style={[cardStyle.container, { height: this.state.collapse[parseInt(val.object_id)] }]}>
            <TouchableHighlight onPress={() => this.toggle(val.object_id)} />
         </Animated.View>
      );
      });

现在我只需要在MainView中调用一次{cards}，React Native就会渲染多张卡片：

      return (
         <View style={style.container}>
            <View style={style.colDash}>
               <ScrollView>
                  {cards}
               </ScrollView>
            </View>
        </View>
      );

Here's an image of the output

现在，一旦我按下按钮，就会在屏幕上的每个组件上触发onPress。

我已经尝试过：

创建了一个数组并向其推入一个随机值，因为id始终从1开始。其余的操作通过简单的for循环完成。这可能不是解决我的问题的最佳方法。

  toggle(id) {
     var test = []
     test.push(123);
     for (var i = 1; i < 8; i++) {
         if (id == i) {
             var temp = new Animated.Value(75);
             Animated.timing(
                temp, {
                   toValue: 150,
                   duration: 500,
                }
             ).start()
             test.push(temp);
         }
         else {
             var temp = new Animated.Value(75);
             Animated.timing(
                temp, {
                    toValue: 75,
                    duration: 1,
                }
             ).start()
             test.push(temp);
        }
     }
     this.setState({
         collapse: test
      });

稍后，我还想添加一种可能性，使其能够同时切换多个实例。到目前为止，当我触发一个onPress时，其余的将重置。

Answer 1

向您的TouchableHighlight组件添加索引，然后尝试

在通过映射json呈现的每个组件上调用React Native onPress

1 个答案: