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

时间:2018-05-21 23:28:10

标签: react-native react-native-android react-native-ios react-native-flatlist react-native-navigation

假设我有一些包含某些项目的FlatList,我按下其中一个,然后打开另一个屏幕,其中包含该项目的详细信息。好吧,所以我需要的是,在按下名为"得到它的按钮之后!"并进入后面的屏幕(FlatList屏幕),如何在所选行中将背景颜色设置为绿色?

So i click in one item of the FlatList, then it shows me another screen with the details of that item

Once im in the Details screen, i press the button "Got it!", and it brings me back to the FlatList screen

This is exactly what i need, set a background color only in the View shown in that item, if i press another item and do the same thing, it will be shown changed the background both of them, and so on...

注意:class 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()方法,但我不知道究竟是哪一个以及如何。有人可以帮帮我吗?

1 个答案:

答案 0 :(得分:0)

  • 您必须创建this.state.someArrayName并从this.props.navigation.state.params复制并将backgroundColor键添加到每个对象并添加颜色。将该颜色应用于您的商品&#39;查看背景颜色。 * {{backgroundColor:item.backgroundColor}}

  • 创建一个功能changeColor来更改backgroundColor的颜色

  • GetFlatListItem函数中,将该函数传递给详细视图

  • 在详细信息视图中,调用changeColor函数。点击this.props. changeColor()按钮时Got it