Как изменить цвет фона элемента FlatList при нажатии кнопки в React Native?

Question

Давайте предположим, что у меня есть FlatList с некоторыми элементами, я нажимаю на один из них, затем открываю другой экран с деталями этого элемента.Хорошо, так что мне нужно, после нажатия кнопки под названием "Понял!"и переходит на задний экран (экран FlatList), как я могу установить зеленый цвет фона в выбранной строке?

Итак, я нажимаю на один элемент FlatList, затем он показывает мне другой экранс деталями этого элемента

Когда я попадаю на экран «Подробности», я нажимаю кнопку «Понял!», и он возвращает меня к экрану FlatList

Это именно то, что мне нужно, установить цвет фона только в представлении, отображаемом в этом элементе, если я нажму другой элемент и сделаю то же самое, будет показано, что они оба изменили фон, и такon ...

ПРИМЕЧАНИЕ: детали класса и ProfileActivity находятся внутри App.js как дочерние элементы.

 class ProfileActivity extends Component
 {
GetFlatListItem (Description, Tutorial, Imagen, Title) {

Alert.alert(Description);
this.props.navigation.navigate('Fourth', {Tutorial, Imagen, Title});
}
return(
     <View style = { styles.MainContainer }>
     <Button title="Logout" onPress={ () => goBack(null) } />
        <Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Email } </Text>


      <FlatList

                data={ this.state.dataSource }

                ItemSeparatorComponent = {this.FlatListItemSeparator}

                renderItem={({item}) => <View style={{flex: 1, flexDirection: 'row'}}> <Text style={styles.points}>+ {item.points}</Text> 
                                            <Text style={styles.flatview} onPress={this.GetFlatListItem.bind
                                            (this, item.description, item.tutorial, item.image, item.title)} >{item.title}</Text></View>}

                keyExtractor={(item, index) => index.toString()}

               />
     </View>
  );
class Details extends Component{
onPress = () => {
this.setState({
  const {goBack} =this.props.navigation;
})
}
return(
     <View style = { styles.MainContainer }>

     <TouchableHighlight
     style={styles.buttonStyle}
     onPress={this.onPress}
    >
     <Text> Got it! </Text>
    </TouchableHighlight>

        <Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Title } </Text>
         <Image
      style={{width: 66, height: 58}}
      source={{uri: this.props.navigation.state.params.Imagen}}
    />
    <Text style = {styles.TextComponentStyle}> { this.props.navigation.state.params.Tutorial } </Text>
     </View>
  );
}
export default MainProject = createStackNavigator(
{
First: { screen: App },

Second: { screen: ProfileActivity },

Fourth: { screen: Details }

});

Что я думаю, это передать некоторые значения методу onPress ()в классе деталей, но я не знаю, какой именно и как.Кто-нибудь может мне помочь?

Answer 1

• Вам нужно будет создать this.state.someArrayName и скопировать из this.props.navigation.state.params, добавить ключ backgroundColor к каждому объекту и добавить свой цвет.Примените этот цвет к цвету фона ваших товаров.* {{backgroundColor: item.backgroundColor}}

• Создайте функцию changeColor для изменения цвета backgroundColor

• В вашемGetFlatListItem функция, передайте эту функцию в подробный вид

• В подробном представлении вызовите эту функцию changeColor.this.props. changeColor() при нажатии кнопки Got it.