Интегрируйте избыточный mapStateToProps в App.js на реагирующий нативный

Question

Я хотел бы интегрировать избыточный mapStateToPros в мой файл App.js. Зачем? Потому что мне нужно активировать эффект размытия при появлении моих модальностей. Итак, давайте предположим, что у меня есть следующий 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>
    )
  }

Надеюсь, я все прояснил:)

Answer 1

Вы отображаете modalIsOpened prop на <AppContainer> здесь, но ожидаете, что он будет существовать на <App>.

Переместите <Blur> внутрь <AppContainer> и нанесите на карту пропеллер внутри него.