react-native-modal 内的导航

Posted 2023-02-16

【中文标题】react-native-modal 内的导航

【英文标题】：Navigation inside react-native-modal

【发布时间】：2020-02-20 14:28:06

【问题描述】：

我有一个带有底部标签导航的应用程序（以防它很重要），有时用户可以打开一个模式（react-native-modal）。模态中有按钮，我想在模态中实现导航，以便当用户按下其中一个按钮时，它们被导航到模态内部的另一个屏幕（并且可以向后导航）。 任何帮助表示赞赏，在此先感谢！ 我想要的例子：

【问题讨论】：

最简单的方法是在模态本身内实现一个导航器，它与主模态隔离

感谢您的评论。有这方面的例子吗？

到目前为止我尝试过的所有方法都使它在模态之外导航

不清楚，您是否希望模态内容更改或单击模态中的任何按钮，您关闭模态并导航到另一个页面？

我想通了。使用 mode: 'modal' 毕竟确实有帮助。剩下的唯一问题是模式填满了整个屏幕。导航选项：cardStack：手势启用：真，

【参考方案1】：

我有一个这样的问题。但是我没有使用路由，因为我在路由中，我想在屏幕内打开另一个组件。 所以我使用纯组件做到了。我做了一个控制可见性变量，当用户点击按钮时显示另一个“屏幕”，当用户关闭它时隐藏。

这是一个例子：

//Parent component
class Parent extends Component 
    state = 
      viewClhild: false
    

    goToChild = (task) =>     
        this.setState(viewChild: true)
    

    onShowClhildChange(viewChild) 
        this.setState( viewChild );
      

    render() 
        <View>
            
                this.state.viewChild 
                  ? <ChildScreen onShowClhildChange=this.onShowClhildChange.bind(this) /> 
                  : <Text>Show Parent</Text>
              
            <Button 
                onPress=() => this.goToChild()
            >
                <Text style=button.text>Entrar</Text>
            </Button>
        </View>
    




//Child Component
class ChildScreen extends Component 
    isChildVisible = (isVisible) => 
        this.setState( viewChild: isVisible )
        if (this.props.onShowClhildChange) 
           this.props.onShowClhildChange(isVisible);
        
      
      constructor (props) 
        super(props);

        this.state = 
          viewChild: this.props.viewChild
        
      

      render() 
        return (
          <View>
            <Button 
              onPress=() => this.isChildVisible(false)
            >
              <Text>CLOSE CHILD SCREEN</Text>
            </Button>
        </View>
        )
    

希望对你有帮助！