调用函数以更新 React Native 中的上下文

Question

我在 React Native 中调用函数时遇到问题。我只是想更改“上下文”的值。这是一些代码，首先是“上下文”的脚本：

//LogContext.js

import React, { useState } from 'react'

export const LogContext = React.createContext({
  set: "en",
  login: "false"
})

export const LogContextProvider = (props) => {

  const setLog = (login) => {
    setState({set: "jp", login: login})
  }

  const initState = {
    set: "en",
    login: "false"
  } 

  const [state, setState] = useState(initState)

  return (
    <LogContext.Provider value={state}>
      {props.children}
    </LogContext.Provider>
  )
}

和“app.js”代码：

//app.js

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

import { LogContextProvider, LogContext } from './LogContext'

function HomeScreen({ navigation }) {
const state = useContext(LogContext);

 return (
  <>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Passed config: {JSON.stringify({state})}</Text>
      <Text>Home Screen</Text>
    </View>
 {state.login === 'false' ? (
        <Button
          title="Go to Login"
          onPress={() => navigation.navigate('Login')}
        />
  )     : (
        <Button title="Stuff" onPress={() => navigation.navigate('DoStuff')} />
      )}
  </>
 );

}

function LoginScreen({ navigation }) {
const state = useContext(LogContext);

//do stuff to login here...
state.setLog('true');  //not functional...

  return (
      <LogContext.Provider value={'true'}>  //value={'true'} also not functional...   
       <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <Text>Login Screen</Text>
         <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
       </View>
      </LogContext.Provider>
  );

}

function StuffScreen({ navigation }) {
//do other stuff here...
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="DoStuff" component={StuffScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

显然我对 React Native 不太熟悉。任何有关如何调用“setLog()”函数以更新“上下文”全局变量值的建议将不胜感激。提前谢谢你。

我正在尝试修改我的“App()”函数，以按照其他用户的建议将导航器包装在提供程序中...但是以下内容完全不起作用...感谢您的建议：

const Stack = createStackNavigator();

function App() {
const [data, setData] = useState({
set: 'en',
login: 'false',
});

const state = { data, setData };

return (
<LogContext.Provider value={state}>
  <NavigationContainer>
    {state.data.login === 'true' ? (
      <Stack.Navigator>
        <Stack.Screen name="BroadCast" component={VideoScreen} />
        <Stack.Screen name="Logout" component={LogoutScreen} />
      </Stack.Navigator>
    ) : (
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    )}
  </NavigationContainer>
</LogContext.Provider>
);
}

Answer 1

您遇到的问题是您的上下文中没有设置函数，我认为不需要单独的 LogContext 提供程序函数。

您可以在 app.js 或任何根函数中简单地执行该部分。下面的例子就是这样做的。您可以看到状态值是如何与设置值的函数一起传递的，并且可以从提供程序内部的登录组件进行修改。如果您使用单独的提供程序，它会有点混乱。下面是一个没有导航部分的工作示例，可以为您提供一个想法。

const LogContext = createContext({
  data: {
    set: 'en',
    login: 'false',
  },
});

export default function App() {
  const [data, setData] = useState({
    set: 'en',
    login: 'false',
  });

  const state = { data, setData };

  return (
    <LogContext.Provider value={state}>
      <View style={{ flex: 1 }}>
        <Text>{JSON.stringify(state.data)}</Text>
        <Login />
      </View>
    </LogContext.Provider>
  );
}

const Login = () => {
  const state = React.useContext(LogContext);
  return (
    <View>
      <Button
        onPress={() => state.setData({ set: 'bb', login: 'true' })}
        title="Update"
      />
    </View>
  );
};

要修改您的代码，您应该将主导航器包装在 LogContext.Provider 中并保持其中的状态，这将帮助您完成其余的工作。 随时询问任何进一步的澄清:)