Question

在我的index.ios.js中使用react-native-drawer（https://github.com/root-two/react-native-drawer），我进行了以下设置并试图通过＆＃39; navigator＆＃39;引用内容＆＃39; s＆lt; DrawerPanel /＆gt; of＆lt;抽屉/＆gt;。我在＆lt; console.log（this.props.navigator）中DrawerPanel /＆gt;但是当我尝试在this＆lt;中执行类似于this.props.navigator.replace（）的操作时，会传入错误的导航器引用。 DrawerPanel /＆gt;

如何传递正确的导航器构造函数，就像传递给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>
    )
  }

Answer 1

这是应该怎么做的。您保存导航器引用表单SELECT start, stop FROM ( SELECT t1.id AS start, MIN(t3.id) AS stop FROM sequence t1 INNER JOIN sequence t2 ON t1.id + 1 = t2.id LEFT OUTER JOIN sequence t3 ON t1.id < t3.id GROUP BY t1.id ORDER BY 1 ) x WHERE x.start NOT IN ( SELECT MIN(t3.id) AS stop FROM sequence t1 INNER JOIN sequence t2 ON t1.id + 1 = t2.id LEFT OUTER JOIN sequence t3 ON t1.id < t3.id GROUP BY t1.id ORDER BY 1 ) GROUP BY start;方法定义一个getter方法，将方法传递给您想要的组件。

＆＃13;

renderScene

＆＃13;

Answer 2

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

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

Answer 3

在更新2中，您已完成：var navigator = pr.getNav。这只会将getNav函数指定给您刚刚定义的导航器变量。所以这里的导航器只是对getNav函数的引用。

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

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

3 个答案: