如何将导航器引用传递给 React Native <Drawer/>？

IT技术 javascript ios react-native react-jsx
2021-04-25 05:15:05

在我的 index.ios.js 中使用 react-native-drawer ( https://github.com/root-two/react-native-drawer )，我进行了以下设置并尝试将“导航器”引用传递到内容的 < < Drawer /> 的 DrawerPanel />。我在 < DrawerPanel /> 中使用 console.log(this.props.navigator) 但传入了错误的导航器引用，当我尝试在 < DrawerPanel /> 中执行类似于 this.props.navigator.replace() 的操作时

如何传入正确的导航器构造函数，就像传入 renderScene 和 configureScene 的构造函数一样？：

class practice extends Component {
    ...
    renderScene(route, navigator){
        ...
    }

    configureScene(route, routeStack){
        ...
    }

    render() {
        return (
          <Drawer
            content={<DrawerPanel navigator={navigator}/>}
            ...
          >
            <Navigator
              configureScene={this.configureScene}
              initialRoute={{name: 'Login', component: Login}}
              renderScene={this.renderScene}
              style={styles.container}
              navigationBar={
                <Navigator.NavigationBar
                  style={styles.navBar}
                  routeMapper={NavigationBarRouteMapper(this.openDrawer)}
                />
              }
            />
         </Drawer>
    );
  }
}

先感谢您！

更新 3****

在我的 <DrawelPanel/>

import HomePage from './HomePage'

render(){

var pr = this.props
var navigator = pr.getNav()

return (
    <View style={{flex:1, padding: 30, backgroundColor: 'black'}}>
        <MadeButton 
            componentName={HomePage}
            navigator={navigator}
            pageName='HomePage'
            style={{fontSize:15, fontWeight:'bold', color:'white'}}
        />
    </View>
)

然后在我的 <MadeButton/>

  static propTypes = {
    componentName: React.PropTypes.any,
    navigator: React.PropTypes.any,
    pageName: React.PropTypes.string,
    style: React.PropTypes.object
  }

  _navigate(type='Normal'){
    this.props.navigator.replace({
      component: this.props.componentName,
      type: type,
      name: this.props.pageName
    })
  }

  render(){
    var pr = this.props;
    var st = this.state;
    var styles = pr.style;

    return(
      <TouchableHighlight onPress={() => this._navigate()}>
        <Text style={styles}>{pr.pageName}</Text>
      </TouchableHighlight>
    )
  }
3个回答

这是应该如何做的。您保存导航器引用表单renderScene方法定义一个getter 方法，将该方法传递给您想要的组件。 

class practice extends Component {
    ...
    renderScene(route, navigator){
        this._navigator = navigator
    }

    configureScene(route, routeStack){
        ...
    }
     
    getNav = () => {
      return this._navigator
    }

    render() {
        return (
          <Drawer
            content={<DrawerPanel getNav={this.getNav}/>}
            ...
          >
            <Navigator
              configureScene={this.configureScene}
              initialRoute={{name: 'Login', component: Login}}
              renderScene={(route, navigator) => this.renderScene(route, navigator)}
              style={styles.container}
              navigationBar={
                <Navigator.NavigationBar
                  style={styles.navBar}
                  routeMapper={NavigationBarRouteMapper(this.openDrawer)}
                />
              }
            />
         </Drawer>
    );
  }
}

我认为你错了。如果使用 , 不应与 具有相同的父节点。

const Drawer = <Drawer
                  content={<DrawerPanel navigator={navigator}/>}
                  ...
               />
<Navigator
  initialRoute={{ name: 'Drawer', component: Drawer }}
  renderScene={(route, navigator) =>
  configureScene={(route) => {
    return Navigator.SceneConfigs.VerticalDownSwipeJump;
  }}
  renderScene={(route, navigator) => {
    let Component = route.component;
    return <Component {...route.params} navigator={navigator} />
   }} />
  }
/>

在更新2，你这样做：var navigator = pr.getNav。这只会将 getNav 函数分配给您刚刚定义的 navigator 变量。所以这里的导航器只是对 getNav 函数的引用。

您需要做的是var navigator = pr.getNav()，然后将导航器传递给MadeButton. 希望是澄清事情。

其它你可能感兴趣的问题
上一篇无法在条形图上显示计数（svg 图） 下一篇我的印刷品没有达到我的预期。我可以从哪里开始故障排除？