react-native-modal内的导航

问题描述 投票:1回答:1

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

enter image description here

react-native react-navigation react-native-modal
1个回答
0
投票

我有这样一个问题。但是我没有用route来实现,因为我在一条路线上,我想在屏幕内打开另一个组件。因此,我使用纯组件进行了此操作。我做了一个控件可见性变量,当用户单击按钮时显示了另一个“屏幕”,而在用户关闭按钮时将其隐藏。

这里是一个例子:

//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>
        )
    }
}

我希望它能为您提供帮助!

© www.soinside.com 2019 - 2024. All rights reserved.