Question

（到目前为止）我有一个可以使用React Native Navigation版本1的应用程序。我有工作标签和工作侧抽屉。但是，我被困在如何使链接显示屏幕的问题上。我花了几个小时在上面，尽管有很多版本2和3的示例，但它们与v1完全不同。

有人可以显示一个简单的示例，说明如何从版本1的侧抽屉中显示屏幕。

我的App.js文件导入并注册了一堆屏幕，并设置了带有四个选项卡和一个抽屉的Navigation.startTabBasedApp：

 // Create a side drawer
drawer: {
right: {
  screen: "myApp.SideDrawer"
 }
},

侧面抽屉组件具有一堆视图，其中包含TouchableOpacity项以及一个视图和一个文本项。

 class SideDrawer extends Component {
render() {
    return (
        <View style={[styles.container, { width:        Dimensions.get("window").width * 0.8 }]} >
            <View style={styles.dividerBox}>
            <Text style={styles.subTitles}>My Side Drawer Label</Text>
            </View>

            <View style={styles.calculatorsView} >
            <TouchableOpacity}>
                    <View style={{ flexDirection: "row", alignItems: "center" }}>
                        <Text style={styles.sideDrawerTxt}>PIZZA</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity>
                    <View style={{ flexDirection: "row", alignItems: "center" }}>
                        <Text style={styles.sideDrawerTxt}>HAMBURGERS</Text>
                    </View>
                </TouchableOpacity>
            </View>

...等等

一切正常，但我认为其中之一：（a）我可以跳过TouchableOpacity以解决任何问题要么（b）我需要添加一个onPress（）来调用一个函数，该函数将显示我想要的屏幕并关闭抽屉。

我确实找到了（b）的一些代码，但是无论我戳多少都行不通。

 <TouchableOpacity onPress={this.goToScreen.bind(this, 'Pizza')}>

///////

 goToScreen = (screen) => {
    const visibleScreenInstanceId = Navigation.getCurrentlyVisibleScreenId();
    visibleScreenInstanceId.then((result)=>{
    this.props.navigator.handleDeepLink({
           link: screen,
           payload: result.screenId // (optional) Extra payload with deep link
        });
    })
   }

所以我要扯掉头发，我需要保留所有头发。

任何人都拥有版本1的经验吗？

React Native Navigation v1中的侧边抽屉

0 个答案: