react-native - React Native Modal 不使用上下文和 redux 显示
问题描述
我创建了一个自定义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"
但没有出现模式。
解决方案
我不确定这是否是您正在寻找的东西,但我管理我的详细信息,如下所示。
class Abc {
var1;
var2;
var3 = new B();
var4 = new C();
var5 = {}
var6 = [];
success = a => {
//your logic
}
}
class B {
varA;
varB;
varC = false;
}
我希望这是有帮助的。
推荐阅读
- java - 使用 Java Nashorn 引擎仅验证 javascript
- python - 比较来自两个不同文本文件 Python 的 URL
- javascript - 将输入字段放入状态中的一个数组
- javascript - 图表不会在 `onchange` 函数中重绘
- string - 从 String 到 map[string]interface{} golang
- javascript - Protractor Angular 4 E2E意外令牌导入
- c# - 在 Unity 中的最小和最大 X、Y 和 Z 坐标之间移动相机
- javascript - 有没有办法使用 JsDoc 将函数标记为模板文字标记?
- bash - 在 bash 中,有没有办法暂停脚本,让用户输入一些命令,然后在完成后恢复脚本?
- python-3.x - 安装 python-binance 时出错