首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >在react-native-modal中导航

在react-native-modal中导航
EN

Stack Overflow用户
提问于 2019-10-24 17:19:00
回答 1查看 5.2K关注 0票数 8

我有一个应用程序与底部选项卡导航(以防万一它很重要),有时用户可以打开一个模式(反应-本地-模式)。在模式中有一些按钮,我想在模式中实现导航,这样当用户按下其中一个按钮时,它们就会被导航到模式中的另一个屏幕(并且可以向后导航)。如有任何帮助,我们将非常感谢!下面是我想要的示例:

EN

回答 1

Stack Overflow用户

发布于 2019-10-27 04:54:40

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

下面是一个示例:

代码语言:javascript
复制
//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>
        )
    }
}

我希望它能帮助你!

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58538133

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档