我正在尝试切换嵌套平面列表中按钮的动态背景色。 我能够改变颜色，但它改变了列表中的所有元素。

我想根据数组中提供的颜色更改问题的颜色，您可以在下面的零食中查看完整的代码。

零食URL-https://Snack.expo.io/@jerrypatels/bossy-bagel

用于循环的JSON数据

[
  {
    title: 'Q1',
    data: [
      {
        Q: 'Question 1',
        length: 2,
        width: 38,
        options: [
          {id: 1, value: 'Yes', color: '#40AB35'},
          {id: 2, value: 'No', color: '#C6280F'},
        ],
      },
      {
        Q:
          'Question 2',
        length: 3,
        width: 30,
        options: [
          {id: 1, value: 'Yes', color: '#40AB35'},
          {id: 2, value: 'No', color: '#C6280F'},
          {id: 3, value: 'NA', color: '#808289'},
        ],
      },
      {
        Q:
          'Question 3',
        length: 2,
        width: 38,
        options: [
          {id: 1, value: 'Yes', color: '#40AB35'},
          {id: 2, value: 'No', color: '#C6280F'},
        ],
      },
    ],
  },
]

反应本机代码以显示到前端

<FlatList
        data={Alongside}
        keyExtractor={(item, index) => '' + index}
        renderItem={({item}) => (
          <>
            <View style={styles.buttonContainer}>
              <View
                style={{
                  borderRadius: 2,
                  borderBottomWidth: 1,
                }}>
                <TouchableOpacity
                  style={styles.qtitle}
                  onPress={() => GetStores()}>
                  <Text style={[styles.title, {width: width - 80}]}>
                    {item.title}
                  </Text>
                </TouchableOpacity>
              </View>
              <FlatList
                data={item.data}
                keyExtractor={(item, index) => '2' + index}
                renderItem={({item, index}: any) => (
                  <View style={{padding: 10}}>
                    <Text style={[styles.text, {padding: 10}]}>
                      {item.Q}
                    </Text>
                    <View style={styles.btnP}>
                      {item.options.map((list: any, ind: any) => {
                        return (
                          <TouchableOpacity
                            style={[
                              styles.btn2,
                              {
                                width: width / item.length - item.width,
                                backgroundColor:
                                  checked === list.id //Condition for changing bg color
                                    ? list.color
                                    : '#F4F6FC',
                              },
                            ]}
                            onPress={() => {
                              //
                              setChecked(list.id);
                            }}>
                            <Text
                              style={[
                                Style.normalText,
                                {textAlign: 'center'},
                              ]}>
                              {list.value}
                            </Text>
                          </TouchableOpacity>
                        );
                      })}
                    </View>
                  </View>
                )}
              />