Question

我有一个问题。当我不包装AuthProvider时，一切正常。没有任何问题。但是当我包装AuthProvider时，我的应用程序呈现白色屏幕@@。因此，我检查了终端，并看到Bundle未运行（通常在渲染时，我们可以看到Bundle Loading and Running ...）。我该如何解决这个问题？非常感谢。

createDataContext.js

   import React, { useReducer } from 'react';

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = ({ chilrden }) => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};

    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {chilrden}
      </Context.Provider>
    );
  };
  return { Context, Provider };
};

AuthContext.js

import createDataContext from './createDataContext';

const authReducer = (state, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

export const { Provider, Context } = createDataContext(
  authReducer,
  {},
  { isSignedIn: true }
);

App.js

import React from 'react';
import {Provider as AuthProvider} from './src/context/AuthContext';
import {
  createAppContainer,
  createSwitchNavigator,
} from 'react-navigation';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import {createStackNavigator} from 'react-navigation-stack';



import AccountScreen from './src/screens/AccountScreen';
import TrackDetailScreen from './src/screens/TrackDetailScreen';
import TrackListScreen from './src/screens/TrackListScreen';
import SigninScreen from './src/screens/SigninScreen';
import SignupScreen from './src/screens/SignupScreen';
import TrackCreateScreen from './src/screens/TrackCreateScreen';



const switchNavigator = createSwitchNavigator({
  loginFlow: createStackNavigator({
    Signup:SignupScreen,
    Signin:SigninScreen
  }),
  mainFlow: createBottomTabNavigator({
    trackListFlow:createStackNavigator({
      TrackList:TrackListScreen,
      TrackDetail:TrackDetailScreen
    }),
    TrackCreate:TrackCreateScreen,
    Account:AccountScreen,
  })
});

const App = createAppContainer(switchNavigator);

export default () => {
  return(
    <AuthProvider>
      <App/>
    </AuthProvider>
  );
};

Answer 1

我相信每次导致问题的应用渲染时都会重新创建boundActions。您应该尝试使用useMemo来缓存boundActions。可能有帮助

Answer 2

快速修复：在createDataContext.js（const Provider = ({children})）中使用props代替{children} 通过{props.children}

我的快速修复：

import React, { useReducer } from 'react';

export default (reducer, actions, defaultValue) => {
  const Context = React.createContext();

  const Provider = props => {
    const [state, dispatch] = useReducer(reducer, defaultValue);

    const boundActions = {};

    for (let key in actions) {
      boundActions[key] = actions[key](dispatch);
    }

    console.log(props.children);

    return (
      <Context.Provider value={{ state, ...boundActions }}>
        {props.children}
      </Context.Provider>
    );
  };
  return { Context, Provider };
};

Answer 3

您在拼写上犯了错误，只需检查代码中的拼写，您就会发现{chilrden}

使用Context API时反应本机渲染白屏

3 个答案: