2016-02-19 39 views
1

我對我的應用程序中要通過的Navigator.push({ properties?? })屬性感到失望。我在React Native網站上找不到任何聯機內容。Navigator.push {object}屬性?

任何人都可以幫助我..如果你能指出我能讀的那些屬性會很棒。

修訂

我實際的問題是,下一個使用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。我不得不簡單地改變它(如@納德 - 達比特顯示,他的例子)有分量的動態爲:

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

     /> 
    ); 

現在,我可以從第1頁到第2頁等..

回答

0

你要通過在route,因爲這樣的:

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

Navigator Docs

2

是絕對必須有component如果你是渲染美國唯一一個荷蘭國際集團的route.component在renderScene方法:

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

你也只能通過在ID,並在renderScene方法做一次檢查這樣的事情:

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

但實際上任何屬性你想設置真正取決於你的renderScene配置。

所有屬性傳遞給.push然後可在renderScene route屬性:

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

+1

這就是它的人!'''renderScene(route,navigator)return React.createElement(route.component ...'''在我的代碼中,我的代碼中總是有靜態組件,這就是爲什麼我的路由器要進入同一頁面。真的很感謝! –

+0

嘿,不用擔心,高興它工作:) –

相關問題