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（）”函数以启用“ Context”全局变量的值更新的建议都将不胜感激。我先谢谢你。

我正尝试修改我的“ 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

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

您可以简单地在app.js或任何根函数中执行该操作。下面的例子做到了。您可以看到如何将状态值与用于设置值的函数一起传递，并且可以通过提供程序内部的Login组件对其进行修改。如果使用单独的提供程序，则会有些混乱。下面是一个工作示例，其中没有导航部分，可以使您有所了解。

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内，并保持在那里的状态，这将帮助您完成其余工作。请随时提出任何进一步的说明：）

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

1 个答案: