Question

我有一堆屏幕。每个屏幕都有一个切换语言的状态。问题是当我切换语言时，RN 会重新渲染整个堆栈树，这会将我带回第一个屏幕。

我想要的是重新渲染我所在的屏幕并留在那里。

    const [lang, setLang] = useState ('EN');
    const toggleLang = () => {
       (lang === 'EN')?setLang ('FR'):setLang('EN');
    }
    
    <NavigationContainer>
       <Stack.Naviator>
          <Stack.Screen name = { (lang === 'EN')?'English':'French' } options = {{headerRight () => onPress = {toggleLang} }}/>
          <Stack.Screen name = { (lang === 'EN')?'English':'French' }options = {{headerRight () => onPress = {toggleLang} }}/>
          <Stack.Screen name = { (lang === 'EN')?'English':'French' }options = {{headerRight () => onPress = {toggleLang} }}/>
       </Stack.Naviator>
    </NavigationContainer>

Answer 1

试试这个方法

<NavigationContainer>
  <Stack.Naviator>
    {lang === "EN" ? (
      <Stack.Screen
        name="English"
        options={{ headerRight: () => (onPress = { toggleLang }) }}
      />
    ) : (
      <Stack.Screen
        name="French"
        options={{ headerRight: () => (onPress = { toggleLang }) }}
      />
    )}
  </Stack.Naviator>
</NavigationContainer>

如何防止导航堆栈在状态更新时重新渲染整个树？

1 个答案: