Состояние использования React Native Stack Navigator - PullRequest
Новая
       33

Состояние использования React Native Stack Navigator

1 голос
/ 02 августа 2020

Я пытаюсь сделать Share State Data From MyStack Component. Компоненты вторых данных всегда меняются, а первого экрана нет. Не могли бы вы рассказать мне, в чем проблема? И что мне нужно изменить. спасибо: D 

import React ,{ useState } from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function First({route , navigation}) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title={route.params.count.toString()}
        onPress={() => navigation.navigate('Second')}/>
    </View>
  );
} 

function Second({route , navigation }) {
  route.params.setCount(route.params.count + 1);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title={route.params.count.toString()}
        onPress={() => { navigation.goBack()}}
      />
    </View>
  );
}


const Stack = createStackNavigator();

function MyStack() {
  const [count, setCount] = useState(0);
  return (
    <Stack.Navigator>
      <Stack.Screen name="First" component={First} initialParams={{ count: count , setCount  : setCount }}/>
      <Stack.Screen name="Second" component={Second} initialParams={{ count: count ,setCount  : setCount}}/>
    </Stack.Navigator>
  );
}

export default function App(props) {
  return (
    <NavigationContainer>
        <MyStack props={props}/>
    </NavigationContainer>
  );
}

1 Ответ

0 голосов
/ 02 августа 2020

Причина, по которой вышеуказанное не работает, заключается в том, что FirstScreen не перерисовывается. Вы не можете динамически изменять intialparams после рендеринга экрана. Даже ваш экран 2 не работает должным образом, вы устанавливаете его, но вы видите обновленное значение при повторном посещении экрана.

Способ исправить это - использовать контекстный api, который вы можете использовать для пропуска параметров навигации .

И всегда используйте ловушку, такую ​​как useEffect или buttonclick, для обновления контекста, иначе будет продолжаться повторная отрисовка, что приведет к ошибке. Код будет примерно таким: 

import React, { useState, createContext, useContext } from 'react';
import { Button, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const appContext = createContext();

function First({ route, navigation }) {
  const context = useContext(appContext);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title={context.count.toString()}
        onPress={() => navigation.navigate('Second')}
      />
    </View>
  );
}

function Second({ route, navigation }) {
  const context = useContext(appContext);

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title={context.count.toString()}
        onPress={() => {
          navigation.goBack();
        }}
      />
      <Button
        title="Add to Count"
        onPress={() => {
          context.setCount(context.count + 1);
        }}
      />
    </View>
  );
}

const Stack = createStackNavigator();

function MyStack() {
  const [count, setCount] = useState(0);
  const state = { count, setCount };

  return (
    <appContext.Provider value={state}>
      <Stack.Navigator>
        <Stack.Screen name="First" component={First} />
        <Stack.Screen name="Second" component={Second} />
      </Stack.Navigator>
    </appContext.Provider>
  );
}

export default function App(props) {
  return (
    <NavigationContainer>
      <MyStack props={props} />
    </NavigationContainer>
  );
}
...