React Native bottomTabNavigator()：如果使用 useEffect 更新数据，则在更改选项卡时闪烁

如何解决React Native bottomTabNavigator()：如果使用 useEffect 更新数据，则在更改选项卡时闪烁

我在 React Native 中设置了一个 bottomTabNavigator，并有一个设置选项卡，允许用户选择背景颜色。在导航到所有选项卡之前，我能够成功启用颜色更改的唯一方法是将 unMountOnBlur 设置为 true。但是，每当我更改标签时，这都会导致白色闪烁。如果我在所有选项卡上更改诸如文本之类的内容（例如，设置用户名会导致用户名文本闪烁），则会发生类似的闪烁。

我正在寻找的是等效于 iOS 的 viewWillAppear 函数，以便我可以在呈现组件之前对其进行更新。请注意，我正在使用函数式方法做所有事情，因此我使用了钩子。

这是我的代码：

App.js

import React from "react"
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs"
import { NavigationContainer } from "@react-navigation/native"
import { Ionicons } from "@expo/vector-icons"
import Home from "./Home.js"
import Tab2 from "./Tab2.js"
import Settings from "./Settings.js"

const Tab = createBottomTabNavigator()

export default function MyTabs() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        tabBarOptions={{
          activeTintColor: "#f55",inactiveTintColor: "#444",tabStyle: { backgroundColor: "#ddd" },}}
        screenoptions={({ route }) => ({
          tabBarIcon: ({ color,size }) => {
            let iconName
            if (route.name === "Home") {
              iconName = "home"
            } else if (route.name === "Tab2") {
              iconName = "md-information"
            } else if (route.name === "Settings") {
              iconName = "md-settings"
            }
            return <Ionicons name={iconName} size={size} color={color} />
          },unmountOnBlur: true,// works but causes flashes in UI
        })}
      >
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Tab2" component={Tab2} />
        <Tab.Screen name="Settings" component={Settings} />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

Home.js

import React,{ useEffect,useState } from "react"
import { StyleSheet,View,Text } from "react-native"
import AsyncStorage from "@react-native-community/async-storage"

export default function Home() {
  const [bgColor,setBgColor] = useState("#fff")

  const loadData = async () => {
    try {
      const data = await AsyncStorage.getItem("bgc")
      if (data !== null) {
        setBgColor(data)
        console.log(data)
      }
    } catch (err) {
      alert(err)
    }
  }

  useEffect(() => {
    loadData()
  },[])

  return (
    <View style={[styles.container,{ backgroundColor: bgColor }]}>
      <Text style={{ fontSize: 18,padding: 10 }}>Home screen</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,alignItems: "center",justifyContent: "center",backgroundColor: "#f77",},})

Settings.js

import React,Text,TouchableOpacity } from "react-native"
import AsyncStorage from "@react-native-community/async-storage"

export default function Settings() {
  const [bgColor,setBgColor] = useState("#fff")

  const storeData = async () => {
    try {
      await AsyncStorage.setItem("bgc",bgColor)
    } catch (err) {
      alert(err)
    }
  }

  const loadData = async () => {
    try {
      const data = await AsyncStorage.getItem("bgc")
      if (data !== null) {
        setBgColor(data)
      }
    } catch (err) {
      alert(err)
    }
  }

  useEffect(() => {
    loadData()
  },padding: 10 }}>
        Choose a background color
      </Text>
      <View style={styles.row}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => setBgColor("#ff7777")}
        >
          <Text>Red</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => setBgColor("#7777ff")}
        >
          <Text>Blue</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={styles.button}
          onPress={() => setBgColor("#fff")}
        >
          <Text>White</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.row}>
        <TouchableOpacity
          style={styles.button}
          onPress={() => storeData(bgColor)}
        >
          <Text>Save</Text>
        </TouchableOpacity>
      </View>
    </View>
  )
}