在平面列表 onpress 中更改按钮的背景颜色

Question

我的平面列表中有一些按钮，如下所示

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

中的减速器

 setLanguage: (state, action) => {
      state.language = action.payload;
    },

Answer 1

运行速度非常快，这是我创建的 example。

也许延迟在减速器中。所以我人为地放慢了速度。

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" }

我认为你甚至可以用一个变量来解决问题（也许这与工作逻辑相矛盾），但这已经是重构了。

希望能帮到你。

Answer 2

1秒延迟不取决于`background color changing time`，而是取决于`setLanguage`做什么？

如果setLanguage更改应用程序语言，这意味着使用此选择器的所有组件将重新呈现

你可以在分隔符状态下拆分背景颜色，这将快速改变背景，但改变语言仍然需要1秒

反应状态的解决方案只是为了解释（你可以使用 Redux）


//add this line
const [selectedLanguage, setSelectedLanguage] = react.useState(languages);


const renderItem = ({ item }) => <Item name={item.name} slug={item.slug} />;

  const Item = ({ name, slug }) => {
    return (
      <TouchableOpacity
        delayPressIn={0}
        onPress={() => {
          setSelectedLanguage(slug); //add this line, will update color immediately
          dispatch(setLanguage(slug));
        }}
      >
        <View
          style={[
            styles.item,
            //use selectedLanguage here
            { backgroundColor: selectedLanguage === slug ? "#940062" : "black" },
          ]}
        >
          <Text style={styles.title}>{name}</Text>
        </View>
      </TouchableOpacity>
    );
  };

};

在平面列表 onpress 中更改按钮的背景颜色

change backgroundcolor of button in flatlist onpress

reactjs

react-native

react-redux

react-native-flatlist

1秒延迟不取决于`background color changing time`，而是取决于`setLanguage`做什么？

在平面列表 onpress 中更改按钮的背景颜色

change backgroundcolor of button in flatlist onpress

reactjs

react-native

react-redux

react-native-flatlist

1秒延迟不取决于background color changing time，而是取决于setLanguage做什么？

1秒延迟不取决于`background color changing time`，而是取决于`setLanguage`做什么？