我的平面列表中有一些按钮,如下所示
const renderItem = ({ item }) => <Item name={item.name} slug={item.slug} />;
const Item = ({ name, slug }) => {
return (
<TouchableOpacity
delayPressIn={0}
onPress={() => {
dispatch(setLanguage(slug));
}}
>
<View
style={[
styles.item,
{ backgroundColor: languages == slug ? "#940062" : "black" },
]}
>
<Text style={styles.title}>{name}</Text>
</View>
</TouchableOpacity>
);
};
return (
<SafeAreaView style={styles.container}>
<FlatList
horizontal={true}
data={jsonLang}
renderItem={renderItem}
keyExtractor={(item) => item.id.toString()}
/>
</SafeAreaView>
);
};
上面的代码工作正常,当我点击它时正在改变背景?但是背景颜色的变化会延迟 1 秒。这是更改按钮背景颜色的正确方法吗?
谢谢。
P.S: setlanguage
是我的 redux 中的 reducer
setLanguage: (state, action) => {
state.language = action.payload;
},
最佳答案
它运行得非常快,这是一个 example我创造了。
也许延迟在 reducer 中。所以我人为地放慢了速度。
const setLanguage = (languages) => {
return (dispatch) => {
setTimeout(()=>{
dispatch({
type: "setLanguage",
value: languages
});
}, 1000) // <--------------------- delay
};
}
但现在我们需要使样式应用得更快。我在 next_languages
状态中添加了另一个字段:
const initialState = {
languages: "1",
next_languages: "1"
}
修改代码如下:
const setLanguage = (languages) => {
return (dispatch) => {
dispatch({ // <-------------- for apply style quiqly
type: "setNextLanguage",
value: languages
});
setTimeout(()=>{
dispatch({
type: "setLanguage",
value: languages
});
}, 1000)
};
}
还在组件中添加了常数:
const fastLang = languages === next_languages
? languages
: next_languages;
最后,样式就这么设置了,还是很快
{ backgroundColor: fastLang == slug ? "#940062" : "yellow" }
我认为你甚至可以用一个变量来解决问题(也许这与工作逻辑相矛盾),但这已经是重构了。
希望能帮到你。
关于reactjs - 在平面列表 onpress 中更改按钮的背景颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68362579/