как использовать react-native-flux с реактивным ящиком

как использовать react-native-router-flux с react-native-drawer. Я использую версию 3.38.0 для response-native-router-flux. Я пытаюсь вызвать Actions.refresh ({key: 'drawer', open: value =>! Value}); но это не работает. Вот мой код для моей навигации по ящикам.

import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';

class DrawerNavigation extends Component {
render(){
    const state = this.props.navigationState;
    const children = state.children;
    return (
        <Drawer
          ref="navigation"
          open={state.open}
          onOpen={()=>Actions.refresh({key:state.key, open: true})}
          onClose={()=>Actions.refresh({key:state.key, open: false})}
          type="displace"
          content={<SideMenu />}
          tapToClose={true}
          openDrawerOffset={0.2}
          panCloseMask={0.2}
          negotiatePan={true}
          tweenHandler={(ratio) => ({
            main: { opacity:Math.max(0.54,1-ratio) }
          })}>
          <DefaultRenderer navigationState={children[0]} onNavigate=
          {this.props.onNavigate} />
        </Drawer>
    );
 }
 }

экспорт по умолчанию DrawerNavigation;

Вот мое боковое меню

 import React, { Component } from 'react';
 import { View, Text, TouchableHighlight, StyleSheet } from 'react-native';

 class SideMenu extends Component {
 render() {
 return (
 <View style={styles.container}>
  <TouchableHighlight>
    <Text>Home</Text>
  </TouchableHighlight>
  <TouchableHighlight>
    <Text>Profile</Text>
  </TouchableHighlight>
  <TouchableHighlight>
    <Text>Friends</Text>
  </TouchableHighlight>
  </View>
  );

} }

 const styles = StyleSheet.create({
 container: {
 flex: 1,
 padding: 30,
 backgroundColor: 'white'
 },
 })

 export default SideMenu;

Вот мой файл маршрутизации

  import React from 'react';
  import { Scene, Router, Actions, ActionConst } from 'react-native-router-
  flux';
  import RecoverForm from './components/RecoverForm';
  import DrawerNavigation from './components/DrawerNavigation';
  import Dashboard from './components/Dashboard';
  import SignupForm from './components/SignupForm';
  import LoginForm from './components/LoginForm';

  const RouterComponent = () => {
  return (
        <Router sceneStyle={{ paddingTop: 50, flex: 1 }}>

            <Scene key="auth">
                <Scene 
                    title="Please Login" 
                    component={LoginForm} 
                    key="login"
                    rightTitle="Hello"
                    onRight={() => Actions.drawer()}
                />

                <Scene
                    title="Sign Up"
                    component={SignupForm}
                    key="signup"
                />

                <Scene
                    title="Recover Password"
                    component={RecoverForm}
                    key="recover" 
                />
                </Scene>

                <Scene key="drawer" component={DrawerNavigation} open=
                {false} initial >
                <Scene 
                    title="Dashboard" 
                    component={Dashboard} 
                    key="dashboard"
                    hideNavBar={false}
                    initial
                />

            </Scene>    

           </Router>
           );
           };

export default RouterComponent;

person Chuks ben    schedule 30.09.2017    source источник


Ответы (1)


Начиная с response-native-router-flux 4.0 я удалил response-native-drawer, потому что для решения вашей проблемы достаточно простого компонента:

// initialize Redux Router
const ReduxRouter = connect()(Router);

...

<ReduxRouter tintColor='white'>
      <Scene
        key='homeView'
        drawer={true}
        drawerImage={require('./src/img/menu.png')}
        contentComponent={MenuScene}
        >
        <Scene key='homeViewNormal'
          hideNavBar={false}
          >

          <Scene key='importer' hideNavBar={false} title='Import Contacts'
            component={ContactImporterScene} sceneStyle={getScreenContainerStyle()}
            _initial={true}
          />

          <Scene key='main' hideNavBar={false} title='Chats'
            type={'replace'}
            leftButtonTextStyle={{color: 'green'}} 
            backButtonTextStyle={{color: 'green'}} 
            renderRightButton={this.renderRightButtonForChat}
            component={ChatListViewScene} sceneStyle={getScreenContainerStyle()}
            _initial={ currentUser !== null && currentUser.id }
            backButtonTintColor={'white'}
            backButtonTextStyle={{color: 'white'}}
          />

Здесь важно

<Scene
        key='homeView'
        drawer={true}
        drawerImage={require('./src/img/menu.png')}
        contentComponent={MenuComponent}

Свойство contentComponent принимает здесь «нормальный» компонент с элементами рисования ListView (или теперь FlatList) в виде меню и чем-то еще.

А вот как это выглядит, когда кто-то открывает ящик:

введите описание изображения здесь

введите описание изображения здесь

person itinance    schedule 30.09.2017
comment
пожалуйста, могу я также узнать, откуда вы берете свои значки. Я искал, но не смог найти хороший набор значков - person Chuks ben; 02.10.2017