React native 反应本机导航抽屉不改变屏幕

我正试图遵循和建立一个小的测试应用程序。我无法让抽屉呈现所需的屏幕，而总是转到主屏幕。在主屏幕上，我有一个按钮，按下下一个屏幕，工作正常。如果有人能帮忙，我将不胜感激

index.ios.js

import App from './App/App'

const app = new App();

App.js

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

import { Navigation } from 'react-native-navigation';

// screen related book keeping
import { registerScreens } from './Screens/screens';
registerScreens();

const navigatorStyle= {
  navBarBackgroundColor: '#4dbce9',
  navBarTextColor: '#ffff00',
  navBarSubtitleTextColor: '#ff0000',
  navBarButtonColor: '#ffffff',
  statusBarTextColorScheme: 'light',
  statusBarTextColorScheme: 'light',
  tabBarBackgroundColor: '#4dbce9',
  tabBarButtonColor: '#ffffff',
  tabBarSelectedButtonColor: '#ffff00'
};

export default class App extends Component {



constructor(props){
   super(props)
   //load some data
   this.startApp();
}


startApp() {
   Navigation.startSingleScreenApp({
      screen: {
        screen: 'app.Home',
        title: 'Home',
        navigatorStyle
      },
      drawer: {
        left: {
          screen: 'app.Drawer'
        }
      }
    });

 }//end of startApp



}//end of App

screens.js

import { Navigation } from 'react-native-navigation';

import Drawer from './Drawer';
import Screen1 from './Screen1';
import Home from './Home'


export function registerScreens() {
  Navigation.registerComponent('app.Drawer', () => Drawer);
  Navigation.registerComponent('app.Home', () => Home);
  Navigation.registerComponent('app.Screen1', () => Screen1);
}

Drawer.js

 import React, { Component, PropTypes } from 'react';
 import {
    Text,
    View,
    TouchableOpacity,
    ToastAndroid,
  StyleSheet
 } from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons';


class Drawer extends Component {

  //navigate to Screen1 from Drawer
  _goToScreen1() {
        this._toggleDrawer();
        this.props.navigator.popToRoot({
      title: "Screen 1",
      screen: "app.Screen1"
        });
    }//end _goToScreen1

  _toggleDrawer() {
        this.props.navigator.toggleDrawer({
            to: 'closed',
            side: 'left',
            animated: true
        });
    }//end _toggleDrawer


  render(){
    const iconSearch = (<Icon name="md-search" size={26} color="#000000" style={[styles.drawerListIcon, { paddingLeft: 2 }]} />);
        const iconMovies = (<Icon name="md-film" size={26} color="#000000" style={[styles.drawerListIcon, { paddingLeft: 3 }]} />);
        const iconTV = (<Icon name="ios-desktop" size={26} color="#000000" style={styles.drawerListIcon} />);

    return(
                <View style={styles.container}>
                    <View style={styles.drawerList}>

                        <TouchableOpacity onPress={this._goToScreen1.bind(this)}>
                            <View style={styles.drawerListItem}>
                                {iconMovies}
                                <Text style={styles.drawerListItemText}>
                                    Screen1
                                </Text>
                            </View>
                        </TouchableOpacity>
                        <View style={styles.drawerListItem}>
                            {iconTV}
                            <Text style={styles.drawerListItemText} onPress={() => ToastAndroid.show('Coming Soon!', ToastAndroid.SHORT)}>
                                Coming Soon
                            </Text>
                        </View>
                    </View>
                    <Text style={styles._version}>
                        {/* 'v1.0.0' */}
                    </Text>
                </View>

    );//end of return
  }//end of render


}//end of Drawer


Drawer.propTypes = {
  navigator: PropTypes.object
};


const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingLeft: 25,
        justifyContent: 'center'
    },
    drawerList: {

    },
    drawerListIcon: {
        width: 27
    },
    drawerListItem: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 23
    },
    drawerListItemText: {
        color: 'red',
        fontWeight: 'bold',
        fontSize: 23,
        paddingLeft: 15,
        flex: 1
    },
    linearGradient: {
        // top: 0,
        // left: 0,
        // right: 0,
        // height: 248,
        // position: 'absolute'
        flex: 1
    },
    _version: {
        color: '#3c3c3c',
        position: 'absolute',
        bottom: 25,
        marginLeft: 53
    }
});

export default Drawer

import React，{Component，PropTypes}来自'React'；
进口{
文本，
看法
可触摸不透明度，
蟾蜍，
样式表
}从“反应本机”；
从“反应本机矢量图标/离子图标”导入图标；
类抽屉扩展组件{
//从抽屉导航到屏幕1
_goToScreen1（）{
这个；
this.props.navigator.poptroot({
标题：“屏幕1”，
屏幕：“应用程序屏幕1”
});
}//结束(转到屏幕1)
_切换抽屉（）{
this.props.navigator.toggleDrawer({
至：'已关闭'，
边:"左",，
动画：真的
});
}//结束开关抽屉
render（）{
const-iconSearch=（）；
常量iconMovies=（）；
常数iconTV=（）；
返回(
{iconMovies}
屏幕1
{iconTV}
ToastAndroid.show（‘马上就来！’，ToastAndroid.SHORT）}>
马上就来
{/*'v1.0.0'*/}
)；//返回结束
}//渲染结束
}//抽屉末端
Drawer.propTypes={
导航器：PropTypes.object
};
const styles=StyleSheet.create({
容器：{
弹性：1，
paddingLeft:25，
为内容辩护：“中心”
},
抽屉列表：{
},
付款人：{
宽度：27
},
抽屉式：{
flexDirection:'行'，
对齐项目：“居中”，
marginBottom:23
},
抽屉式结构文本：{
颜色：“红色”，
fontWeight:'粗体'，
尺寸：23，
paddingLeft:15，
弹性：1
},
线性梯度：{
//排名：0，
//左:0,，
//右:0,，
//身高：248，
//位置：'绝对'
弹性：1
},
_版本：{
颜色：“#3c”，
位置：'绝对'，
底数：25，
边缘左侧：53
}
});
导出默认抽屉

Home.js

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

class Home extends Component {

  static navigatorButtons = {
    leftButtons: [
      {
        //icon: require('../../img/navicon_menu.png'),
        title: 'Menu',
        id: 'menu'
      }
    ],
    rightButtons: [
      {
        title: 'Edit',
        id: 'edit'
      },
      {
        //icon: require('../../img/navicon_add.png'),
        title: 'add',
        id: 'add'
      }
    ]
  };

  constructor(props){
    super(props);
    // if you want to listen on navigator events, set this up
   this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
  }

  onNavigatorEvent(event) {
    if (event.id === 'menu') {
      this.props.navigator.toggleDrawer({
        side: 'left',
        animated: true
      });
    }
    if (event.id === 'edit') {
      Alert.alert('NavBar', 'Edit button pressed');
    }
    if (event.id === 'add') {
      Alert.alert('NavBar', 'Add button pressed');
    }
  }


  onPressScreen1() {
    this.props.navigator.push({
      title: "Screen 1",
      screen: "app.Screen1"
    });
  }

  render(){
    return(
      <View style={{flex: 1, padding: 20}}>
        <Text>Home</Text>
        <TouchableOpacity onPress={this.onPressScreen1.bind(this)}>
          <Text style={styles.button}>Screen 1</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  button: {
    textAlign: 'center',
    fontSize: 18,
    marginBottom: 10,
    marginTop: 10,
    color: 'blue'
  }
});

export default Home

import React，{Component}来自'React'；
进口{
文本，
看法
可触摸不透明度，
样式表，
警觉的
}从“反应本机”；
类Home扩展组件{
静态导航按钮={
左按钮：[
{
//图标：require（'../../img/navicon_menu.png'），
标题：“菜单”，
id:“菜单”
}
],
右键按钮：[
{
标题：“编辑”，
id:“编辑”
},
{
//图标：require（'../../img/navicon_add.png'），
标题：“添加”，
id:'添加'
}
]
};
建造师（道具）{
超级（道具）；
//如果要侦听navigator事件，请设置此选项
this.props.navigator.setOnNavigatorEvent（this.onNavigatorEvent.bind（this））；
}
onNavigatorEvent（事件）{
如果（event.id==‘菜单’）{
this.props.navigator.toggleDrawer({
边:"左",，
动画：真的
});
}
如果（event.id=='edit'）{
Alert.Alert（'NavBar'，'Edit button pressed'）；
}
如果（event.id=='add'）{
Alert.Alert（'NavBar'，'Add button pressed'）；
}
}
onPressScreen1（）{
这个是.props.navigator.push({
标题：“屏幕1”，
屏幕：“应用程序屏幕1”
});
}
render（）{
返回(
家
屏幕1
);
}
}
const styles=StyleSheet.create({
按钮：{
textAlign:'中心'，
尺码：18，
marginBottom:10，
玛金托普：10，
颜色：“蓝色”
}
});
导出默认主页

Screen1.js

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

class Screen1 extends Component {
  render(){
    return(
      <View>
        <Text>Screen 1 :)</Text>
      </View>
    );
  }
}

export default Screen1

import React，{Component}来自'React'；
进口{
文本，
看法
}从“反应本机”；
类Screen1扩展了组件{
render（）{
返回(
屏幕1:）
);
}
}
导出默认屏幕1
此.props.navigator.poptroot
函数存在问题。相反，在主屏幕（home.js）中使用
this.props.navigator.handleDeepLink（{link:“link_name”}）
和一个
onNavigatorEvent（event）
处理程序来检查此深度链接

// handle a deep link
    if (event.type == 'DeepLink') {
      const parts = event.link;
      if (parts == 'Screen1') {
        this.onPressScreen1();
      }
    }