在React Native中按下按钮时如何更改FlatList项目背景颜色

Question

假设我有一个包含一些项目的FlatList，我按入其中一个，然后打开另一个包含该项目详细信息的屏幕。 好吧，所以我需要的是，在按下“知道了！”按钮之后 并进入后屏幕（FlatList屏幕），如何在所选行中将背景色设置为绿色？

所以我单击了FlatList的一个项目，然后显示了另一个屏幕，其中包含该项目的详细信息

一旦我进入“详细信息”屏幕，我按“知道了！”按钮，它将带我回到FlatList屏幕。

这正是我所需要的，仅在该项目中显示的视图中设置背景颜色，如果我按另一个项目并执行相同的操作，则会显示更改了两个项目的背景，依此类推...

注意：类Details和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 }

});

我认为是将一些值传递给Details类中的onPress（）方法，但是我不知道到底是哪个以及如何。 有人可以帮我吗？

Answer 1

• 您将必须创建this.state.someArrayName并从this.props.navigation.state.params复制并向每个对象添加backgroundColor键并添加颜色。 将该颜色应用于项目的视图背景颜色。 * {{backgroundColor：item.backgroundColor}}

• 创建一个函数changeColor来更改backgroundColor的颜色

• 在您的GetFlatListItem函数中， GetFlatListItem函数传递到详细信息视图

• 在“详细信息视图”上，调用该changeColor函数。 this.props. changeColor() 当您点击“ Got it按钮时， this.props. changeColor() 。