反应本机上下文 API 反应导航

Question

反应原生：^0.64.0，

@react-navigation/native-stack: ^6.1.0

@react-navigation/bottom-tabs: 6.0.5

@react-navigation/native: 6.0.2

我有一个登录屏幕。如果用户通过登录屏幕，应用程序会将用户引导至应用程序的主要部分。这是带有底部标签栏的主屏幕。底部的标签栏为用户提供了在 EditProfileScreen、SetupsScreen 和 TipsScreen 之间移动的选项。

我正在 App.js 中设置 react-navigation：

import Context from './src/GlobalUtils/Context'
import GlobalState from './src/GlobalUtils/GlobalState';

export default class App extends Component {
  static contextType = Context;
  constructor(props) {
        super(props);
        this.state = {
            props: {},
            setups: []
        }
      }
      
     MainScreen() {
       return (
         <Tab.Navigator initialRouteName="SetupsScreen">
             <Tab.Screen name="SetupsScreen" component={SetupsScreen} options={{headerShown: false}} initialParams={{setups: this.context.setups}}/>
             <Tab.Screen name="Know-How" component={TipsScreen} options={{headerShown: false}} initialParams={{param: this.context.props}}/>
             <Tab.Screen name="Profile" component={EditProfileScreen} options={{headerShown: false}} initialParams={{param: this.context.props}}/>
         </Tab.Navigator>
       );
    }

    render() {
      return (
       <GlobalState>
        <NavigationContainer>
           <Stack.Navigator>
              <Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/>
              <Stack.Screen name="MainScreen" component={this.MainScreen} options={{headerShown: false}} />
           </Stack.Navigator>
         </NavigationContainer>
       </GlobalState>
       );
    }
}
        
  

我正在尝试将 Context API 包裹在我的 react-navigation 元素周围，以便将数据从后端调用 (client/src/Login) 传递到 (client/App.js) 文件。为了能够通过初始参数将数据传递到所有屏幕。 (https://reactnavigation.org/docs/params#initial-params)

我的 Context.js

import React from 'react';

export default React.createContext({
    setups: [],
    addNewSetup : (setup) => {},
});

我的 GlobalState.js

import React from 'react';
import Context from './Context';
export default class GlobalState extends React.Component{
    state = {
        setups: [],
    }

    addNewSetup = (setup) => {
        const list = [...this.state.setups, setup];
        this.setState({tasks: list});
    };
    
    render(){
        return (
            <Context.Provider
                value={{
                    setups: this.state.tasks,
                    addNewSetup: this.addNewSetup,
                }}
            >
                {this.props.children}
            </Context.Provider>
        );
    }
}

还有我的 Login.js

import {GetSetups} from "./Api/Index";
import Context from '../GlobalUtils/Context';

 export default class Login extends Component {

    static contextType = Context;
 
    GetSetups(fullUserInfo.user_metadata.bar, fullUserInfo.user_id, this) //Backend call
        .then(response => this.context.addNewSetup(response)) //Add data to Context API
        .then(() => this.props.navigation.navigate('MainScreen')); //Navigate to MainScreen
    };
}

但我无法导航到 MainScreen，因为我收到以下错误：

TypeError: undefined is not an object (evalating 'this.context.tasks')

所以 this.context.tasks 在 App.js 中是 undefined。 如何使上下文不未定义？

谢谢！

Answer 1

既然你已经用你包裹了你的整个导航容器，你可以直接在组件/屏幕中访问上下文数据

例如类组件

import React, { Component } from 'react'
import UserContext from './UserContext'

class HomePage extends Component {
  static contextType = UserContext

  componentDidMount() {
    const user = this.context

    console.log(user) // { name: 'Tania', loggedIn: true }
  }

  render() {
    return <div>{user.name}</div>
  }
}

功能组件

import React, { Component } from 'react'
import { UserConsumer } from './UserContext'

class HomePage extends Component {
  render() {
    return (
      <UserConsumer>
        {(props) => {
          return <div>{props.name}</div>
        }}
      </UserConsumer>
    )
  }
}

带有钩子的功能组件

import React, { useContext } from 'react'
import UserContext from './UserContext'

export const HomePage = () => {
  const user = useContext(UserContext)

  return <div>{user.name}</div>
}