Question

我正在忽视我必须在我的应用程序中传递到Navigator.push({ properties?? })的属性。我在React Native网站上找不到任何在线内容。

任何人都可以帮助我..如果你可以指出我可以阅读的地方那就很棒了。

已更新

我的实际问题是使用Navigator.push从一页转到下一页我正在做下一页：

return (
            <React.Navigator
                initialRoute={{name: 'First Page', index: 0, component: MyFirstPage}}

                navigationBar={this.getNavigationBar()}

                 navigator={this.props.navigator}

                renderScene={(route, navigator) => {

                    return (
                    <View style={{marginTop: 100}}>
                      <MyFirstPage
                        title={'MyFirstPage'}
                        navigator={navigator}
                        route={route}
                      />
                    </View>
                    );
                }}

            />
        );

传递MyFirstPage 错误的地方，因为它总会将我重定向到同一个组件，在本例中为MyFirstPage。我不得不简单地改变它（正如@ nader-dabit在他的例子中所示）将Component动态为：

 return (
        <React.Navigator
            initialRoute={{name: 'First Page', index: 0, component: MyFirstPage}}

            navigationBar={this.getNavigationBar()}

             navigator={this.props.navigator}

            renderScene={(route, navigator) => {
                let NextComponent = route.component;

                return (
                <View style={{marginTop: 100}}>
                  <NextComponent
                    title={'MY FIRST PAGE!!'}
                    navigator={navigator}
                    route={route}
                  />
                </View>
                );
            }}

        />
    );

现在我可以从Page1转到Page2等......

Answer 1

如果要在renderScene方法中使用route.component进行渲染，那么唯一绝对必须存在的是component：

this.props.navigator.push({
    component: About
})

你也可以只传入id，并在你的renderScene方法中检查这样的东西：

if (routeId === 'Login') {
       return (<Login {...route.passProps} navigator={navigator}/>);  
}

但是您想要设置的任何属性实际上都取决于您的renderScene配置。

然后，在renderScene route属性上可以使用传递给.push的所有属性：

this.props.navigator.push({
    component: About,
    color: 'white',
    name: 'jim'
})

renderScene(route, navigator) {
    if(route.color == 'white') { console.log("WHITE COLOR PASSED TO NAV") }
    if(route.name == 'jim') { alert('JIM ROUTE') }
    return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } )
}

您还可以通过附加对象来传递要在路径中直接使用的属性。大多数情况下，你会看到这个称为passProps但它可以被称为任何你想要的东西：

示例：

this.props.navigator.push({ color: 'white', component: About, id: 1 name: { name: 'Chris' }, path: { location: 'Nashville' }, passProps: { someprops: someprops } })

在renderScene方法中进行设置：

renderScene(route, navigator) { return React.createElement(route.component, { ...this.props, ...route.name, ...route.path, ...route.passProps, navigator, route } ) },

并像这样使用它：

var About = React.createClass({ render() { return ( <View> <Text>HEllo from About</Text> <Text>These are the props: { this.props.someprops }</Text> <Text>MY NAME IS { this.props.name }</Text> <Text>MY LOCATION IS { this.props.location }</Text> </View> ) } })

我已经设置了大部分这些示例here。

https://rnplay.org/apps/pZ5ZFw

Answer 2

您必须传递route，因此：

navigator.push({
  name: 'Scene ' + nextIndex,
  index: nextIndex,
});

Navigator Docs

Navigator.push {object}属性？

2 个答案: