react-native - 在 React Native 上集成 App.js 中的 redux mapStateToProps
问题描述
我想在我的 App.js 文件中集成 redux mapStateToPros。为什么?因为当我的模态出现时,我需要触发模糊效果。所以让我们假设我有以下 App.js
import React, {Component} from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import {Provider} from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react'
import store, { persistor } from './src/js/store';
import {createStore, applyMiddleware} from 'redux';
import Reducers from './src/Reducers';
import Preload from './src/screens/Preload';
let store = createStore(Reducers);
const AppNavigator = createStackNavigator({
Preload: {
screen: Preload,
},
});
const AppContainer = createAppContainer(AppNavigator);
export default class App extends Component {
render () {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<AppContainer />
</PersistGate>
</Provider>
)
}
我需要执行以下操作,但是当我的状态更改时,不会触发模糊。
import React, {Component} from 'react';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import {Provider} from 'react-redux';
import { findNodeHandle } from 'react-native';
import { PersistGate } from 'redux-persist/integration/react'
import store, { persistor } from './src/js/store';
import {createStore, applyMiddleware} from 'redux';
import { BlurView } from 'react-native-blur';
import Reducers from './src/Reducers';
import Preload from './src/screens/Preload';
let store = createStore(Reducers);
const AppNavigator = createStackNavigator({
Preload: {
screen: Preload,
},
});
onViewLoaded() {
this.setState({ viewRef: findNodeHandle(this.viewRef) });
}
function mapStateToProps(state) {
return {
modalIsOpened: state.modalReducer.modalIsOpened,
}
}
const AppContainer = connect(mapStateToProps)(createAppContainer(AppNavigator));
export default class App extends Component {
render () {
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<AppContainer
ref={(viewRef) => { this.viewRef = viewRef; }}
onLayout={() => { this.onViewLoaded(); }}
/>
{modalIsOpened && <BlurView
style={{
position: "absolute",
top: 0,
left: 0,
bottom: 0,
right: 0
}}
viewRef={this.state.viewRef}
blurType="dark"
blurAmount={5}
blurRadius={5}
/>}
</PersistGate>
</Provider>
)
}
希望我说清楚了:)
解决方案
您将modalIsOpened
prop 映射到<AppContainer>
此处,但希望它存在于<App>
.
<Blur>
向内移动<AppContainer>
并映射其中的道具。
推荐阅读
- httpclient - RestSharp 到 HTTPClient RequestBody
- hibernate-tools - HibernateTools hbm2ddl ant 任务不保留顺序
- javascript - 使用条件语句过滤对象数组
- sql - Sybase SQL:分区上的行号
- javascript - 在 Javascript 中访问对象的对象
- database - 如何修复安装 mongoDB
- nginx - 如何在带有 nginx 的 debian 9 服务器上通过 https 从 phpmyadmin 发送数据?
- c# - Xamarin iOS - 使用 XCode 编辑的 .xib 的 .cs 和 .designer.cs 文件
- wordpress - 自动将新的 Wordpress 用户添加到 NinjaTables Pro
- flutter - 如何使用 FCM 和 awesome_notifications 只显示一个通知