Question

当前使用rnrf进行导航。灯箱上的按钮无法触发按动操作以转到另一个场景。请帮帮我。这是设置我的rnrf

的方式

<Router>
<Lightbox key="lightbox">
    <Modal hideNavBar>
        <Scene drawer key='root' contentComponent={DrawerContent}>
            <Scene key='root'>
                <Scene hideNavBar key='Home' component={Screen.Home} />
                <Scene hideNavBar key='Details' component={Screen.Details} />
            </Scene>
        </Scene>
        <Scene hideNavBar key='Modals' component={Screen.Modals} />
    </Modal>
    <Scene key="LightBox" component={Component.LightBox} />
    <Scene key="MoreOptions" component={Component.MoreOptions} />
</Lightbox>

这是灯箱上的按钮

<TouchableWithoutFeedback onPress={() => { Actions.Home(); }}>
            <View>
                <Text style={s.text}>Group</Text>
            </View>
 </TouchableWithoutFeedback>

请注意，如果像这样设置，则按钮可以正常工作，但无法通过rnrf传递道具

<Router>
<Lightbox key="lightbox">
    <Modal hideNavBar>
        <Scene drawer key='root' contentComponent={DrawerContent}>
                <Scene hideNavBar key='Home' component={Screen.Home} />
                <Scene hideNavBar key='Details' component={Screen.Details} />
        </Scene>
        <Scene hideNavBar key='Modals' component={Screen.Modals} />
    </Modal>
    <Scene key="LightBox" component={Component.LightBox} />
    <Scene key="MoreOptions" component={Component.MoreOptions} />
</Lightbox>

Answer 1

重要的是要了解RNRF遵循路由器树的层次结构...

根据您的情况，您具有：

<Scene key="LightBox"...

与

的子代并行

<Modal...

当您执行Actions.Home（）时，这将不会执行任何操作，因为您无法并行“跳转”。为了对其进行存档，您将需要执行以下操作...

在调用LightBox的页面中：

 const callback = () =>{
    Actions.Home()
 }
 Actions.MyLightBox({callback})

在您的灯箱中：

<TouchableWithoutFeedback onPress={() => { 
     this.props.callback()
     Actions.pop() 
}}>
        <View>
            <Text style={s.text}>Group</Text>
        </View>
</TouchableWithoutFeedback>

这将：

1-关闭当前的灯箱

2-转到家庭场景

灯箱不会触发动作

1 个答案: