Question

我目前正在用react native构建一个屏幕，该屏幕具有一堆垂直堆叠的水平水平列表。想想超级吃，Spotify和Netflix。

水平flatList包含卡片。

我已向这些卡片添加了“喜欢”和“共享”按钮。我希望我的用户在滚动时能够保存或喜欢卡片中的项目。在instagram上的使用方式。

我点击一个按钮，即可向后端发送请求。

我面临的问题是我希望按钮在按下时能够改变颜色。

我通常要做的是在状态中放置一个新变量，当对后端的请求完成时，该变量会更改。

此方法的问题在于，它会导致状态重新加载。这导致我的组件屏幕重新加载。这不是理想的用户体验。我不希望有人按下按钮时整个屏幕闪烁。

我也不希望我的用户在屏幕上失去位置。

有没有更好的方法可以让我： 1）按下按钮 2）更新后端 3）让我的按钮更改颜色。

constructor(props) {
super(props)
this.state = {
  card: [],  
  saved: false,
  shared: false
}

}

  <FlatList
          data={card}
          keyExtractor={(index, item) => Math.random().toString()}
          horizontal
          renderItem={({ item }) => {
          return (
            <View>
              <TouchableOpacity
                onPress={() => this.description(item)}
              >
                <Card image={{uri: item.img}} containerStyle={{width: width * 0.8, height: height * 0.4}} >
                  <View style={{height: 60, justifyContent: 'center'}}>
                    <Text style={[textStyle, {fontSize: 16}]}>{item.name}</Text>          
                  </View> 
                  <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent:'space-between', width: width * 0.7 }}>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>

                    </View>
                    <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
                      <View>
                        <Icon
                          name='bookmark'
                          type='Feather'
                          onPress={() =>  this.save(item._id)}
                          color={userHasPressedSave.includes(item._id) ? '#FF0000' : null}
                        />
                      </View>
                      <View>
                        <Icon
                          name='ios-heart'
                          type='ionicon'
                          onPress={() => this.shared(item._id)}
                        />
                      </View>
                    </View>
                  </View>
                </Card>
              </TouchableOpacity>
            </View>
          )
          }
        }
        />

Answer 1

这应该很明显……如果您不想修改“全局” /父状态，则使用“本地” /子状态-只需将按钮转换为组件即可。

传递处理程序以能够调用后端请求。

使用它们的本地状态来更改颜色，内容（与标签类似/不同），启用/禁用，计数……无论您需要什么……只要“思考一下”……组件树即可。

您还可以将更改存储在父级（在处理程序内）作为类/对象属性。更新它们（而不是更新状态）不会强制重新渲染，但是您可以在重新渲染时使用它们。

如何在React Native中更改按钮的颜色而不重置状态？

1 个答案: