Question

我刚刚在我的React原生应用中创建了我的第一个界面。我创建了一个导航栏，其中有一个菜单按钮可以单击，因此抽屉打开，我可以从一个屏幕导航到另一个屏幕。我打算用这个https://github.com/root-two/react-native-drawer。我知道我需要在单击时在菜单按钮中调用打开的抽屉，这里是我使用的代码，现在显示警报

openDrawer(){
        this.drawer.open()
    }

    render() {
        return (
            <Container>
                <Navbar
                    bgColor={'#C0C0C0'}
                    title={"Det globale flyktningbildet"}
                    titleColor="white"
                    left={{
                        icon: "ios-menu",
                        iconColor: "#FFFFFF",
                       // onPress: () => {alert('Toggle menu ')}
                        onPress: () => {this.props.openDrawer}
                    }}
                />

                <Drawer
                    type="static"
                  //  content={<ControlPanel />}
                    openDrawerOffset={100}
                    styles={{main: {shadowColor: "#000000", shadowOpacity: 0.4, shadowRadius: 3}}}
                    tweenHandler={Drawer.tweenPresets.parallax}>
                </Drawer>
                <View>
                    <Image
                        source = { require('./../images/image1_2.png')}
                        style={[styles.image1, {resizeMode: 'contain'}]}
                    />
                </View>
            </Container>
        );
    }

那么请你帮我实现抽屉并在不同的屏幕之间导航

Answer 1

通过github中的示例代码，您将得到这个想法，或者您可以参考https://stackoverflow.com/a/42748086/6423570

修改

您应该使用Drawer组件包装屏幕的根容器。 <ControlPanel />组件是应该在抽屉中显示的内容。您可以使用Touchable和导航器中的<ControlPanel />组件在屏幕之间导航。并且openDrawer函数不是prop，将其称为this.openDrawer

render() { return ( <Drawer type="static" // content={<ControlPanel />} openDrawerOffset={100} styles={{ main: { shadowColor: "#000000", shadowOpacity: 0.4, shadowRadius: 3 } }} tweenHandler={Drawer.tweenPresets.parallax} > <Container> <Navbar bgColor={'#C0C0C0'} title={"Det globale flyktningbildet"} titleColor="white" left={{ icon: "ios-menu", iconColor: "#FFFFFF", // onPress: () => {alert('Toggle menu ')} onPress: () => {this.openDrawer} }} /> <View> <Image source = { require('./../images/image1_2.png')} style={[styles.image1, {resizeMode: 'contain'}]} /> </View> </Container> </Drawer> ); }

在React本机应用程序

1 个答案: