React Native Modal 不使用上下文和 redux 显示

Posted 2023-02-16

【中文标题】React Native Modal 不使用上下文和 redux 显示

【英文标题】：React Native Modal not displaying using context and redux

【发布时间】：2021-09-19 19:28:15

【问题描述】：

我创建了一个自定义 ModalContext.js，但是当我触发按钮的 onPress 时，我的测试模式似乎没有显示

// ModalContext.js
import createDataContext from './createDataContext';

const modalReducer = (state, action) => 
  switch (action.type) 
    case 'openModal':
      return  ...state, component: action.payload ;
    case 'hideModal':
      return  ...state, component: null ;
    default:
      return state;
  
;

const openModal = (dispatch) => (component) => 
  console.log('hey there');
  dispatch( type: 'openModal', payload: component );
;

const hideModal = (dispatch) => () => 
  dispatch( type: 'hideModal' );
;

export const  Provider, Context  = createDataContext(
  modalReducer,
  
    openModal,
    hideModal,
  ,
   component: null 
);

// createDataContext.js
import React,  useReducer  from 'react';

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

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

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

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

  return  Context, Provider ;
;

// App.js
const App = createAppContainer(navigator);

export default () => 
  return (
    <ModalProvider>
      <AuthProvider>
        <App
          ref=(navigator) => 
            setNavigator(navigator);
          
        />
      </AuthProvider>
    </ModalProvider>
  );
;

我在测试屏幕上有一个按钮来检查它是否有效。

// WebViewScreen.js
import React,  useState, useContext  from 'react';
import  StyleSheet, Modal, View, Text, Button  from 'react-native';

import  Context as ModalContext  from '../context/ModalContext';

const WebViewScreen = ( navigation ) => 
  const  state, openModal  = useContext(ModalContext);

  const errorModal = (
    <View>
      <Modal animationType='slide' visible=true>
        <View style=styles.centeredView>
          <View style=styles.modalView>
            <Text>Hello</Text>
          </View>
        </View>
      </Modal>
    </View>
  );

  return (
    <>
      <Button
        onPress=() => 
          openModal(errorModal);
        
        title='button'
      />
    </>
  );
;

WebViewScreen.navigationOptions = ( navigation ) => 
  return 
    title: navigation.getParam('title'),
  ;
;

const styles = StyleSheet.create(
  view: 
    backgroundColor: '#f1f3f4',
  ,
  centeredView: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    marginTop: 22,
  ,
  modalView: 
    margin: 20,
    backgroundColor: 'white',
    borderRadius: 20,
    padding: 35,
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: 
      width: 0,
      height: 2,
    ,
    shadowOpacity: 0.25,
    shadowRadius: 4,
    elevation: 5,
  ,
);

export default WebViewScreen;

我在控制台上看到"hey there" 似乎实际上调用了该函数，但没有出现模式。

【问题讨论】：

最好的方法是在应用的主文件中定义模态组件，并使用 redux 状态从应用的任何位置显示它。

@javascriptHuppTechnologies 嗨，我刚刚更新了我的问题，尝试使用减速器制作 ModalContext。

【参考方案1】：

我不确定这是否是您要查找的内容，但我会管理我的详细信息，如下所示。

class Abc  
var1; 
var2; 
var3 = new B();
var4 = new C();
var5 = 
var6 = [];

success = a => 
//your logic



class B 
varA;
varB;
varC = false;

我希望这会有所帮助。