更改平面列表 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 中的 reducer

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

Answer 1

它运行得非常快，这是我创建的example。

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

const setLanguage = (languages) => {
  return (dispatch) => {
    setTimeout(()=>{
      dispatch({
        type: "setLanguage",
        value: languages
      });
    }, 1000) // <--------------------- delay
  };
}

但现在我们需要让样式应用得更快。我给next_languagesstate添加了另一个字段：

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>
    );
  };

};