时间戳

首页 > 解决方案 > 灯箱不会触发动作

react-native - 灯箱不会触发动作

问题描述

目前使用 rnrf 进行导航。灯箱上的按钮无法触发 onpress 动作以转到另一个场景。请帮帮我。这就是设置我的 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>

标签： react-nativereact-native-router-flux

解决方案

了解 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 - 转到家庭场景

推荐阅读