React-native Android Navigator -scene blank

我嘗試做一個導航器的例子，但場景總是空白。有些建議告訴我要將flex：1設置爲導航器，但它不起作用！這裏是我的代碼： index.android.js：React-native Android Navigator -scene blank

'use strict'; 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Navigator, 
    Text, 
    View 
} from 'react-native'; 
import Homepage from './Homepage' ; 
class NavigatorTest extends Component { 
    render() { 
    var defaultName = 'Homepage' ; 
    var defaultCom = Homepage ; 
    return (
     <Navigator style = {{flex:1}} 
     initialRoute = {{name: defaultName,component:Homepage }} 
     configureScene = {() => { 
      return Navigator.SceneConfigs.VerticalDownSwipeJump ; 
     }} 
     renderScene = {(route,navigator) => { 
      let Component = route.component ; 
      if (route.component) { 
      return <Component {...route.params} navigator = {navigator} /> 
      } 
     }} /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: '#F5FCFF', 
    }, 
}); 

AppRegistry.registerComponent('NavigatorTest',() => NavigatorTest);

Homepage.js

import React, { 
    Component, 
    StyleSheet, 
    TouchableOpacity, 
    Text, 
    View 
} from 'react'; 
import Detailpage from './Detailpage' ; 
export class Homepage extends React.Component { 
    static propTypes = { 
    }; 

    constructor(props) { 
    super(props); 
    } 
    _pressButton() { 
    const {navigator} = this.props ; 
    if(navigator) { 
     navigator.push({ 
      name: 'Detailpage', 
      component:Detailpage, 
     }) 
    } 
    } 

    render() { 
    return (
     <View> 
     <TouchableOpacity onPress = {this._pressButton}> 
      <Text>click to jump to Detailpage!</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}

Detailpage.js

import React, { 
    Component, 
    StyleSheet, 
    TouchableOpacity, 
    Text, 
    View 
} from 'react'; 
import Homepage from './Homepage' ; 
export class Detailpage extends React.Component { 
    static propTypes = { 
    }; 
    constructor(props) { 
    super(props); 
    } 
    _pressButton() { 
    const {navigator} = this.props ; 
    if (navigator) { 
     navigator.pop() ; 
    } 
    } 
    render() { 
    return (
     <View> 
     <TouchableOpacity onPress = {this._pressButton}> 
      <Text>click to get back</Text> 
     </TouchableOpacity> 
     </View> 
    ); 
    } 
}

我反應過來，本地的新人，請給我一些建議，提前致謝！

來源

2016-01-26 Herdotage

嘗試簡化並分離你的導航邏輯。通過這種方式調試也將變得更加容易。

class NavigatorTest extends Component { 

    render() { 
    return (
     <Navigator 
     initialRoute={{id: 'Homepage'}} 
     configureScene={this.configureScene} 
     renderScene={this.renderScene} 
     /> 
    ); 
    } 

    configureScene() { 
    return Navigator.SceneConfigs.VerticalDownSwipeJump; 
    } 

    renderScene(route, navigator) { 
    switch(route.id) { 
     case 'Homepage': 
     return this.renderHomepage(navigator); 
     case 'Detailpage': 
     return this.renderDetailpage(navigator); 
     default: 
     throw new Error('No route found for id ' + route.id); 
    } 
    } 

    renderHomepage(navigator) { 
    return <Homepage navigator={navigator} />; 
    } 

    renderDetailpage(navigator) { 
    return <Detailpage navigator={navigator} />; 
    } 

}

Homepage.js

... 

_pressButton() { 
    this.props.navigator.push({id: 'Detailpage'}); 
} 

...

來源

2016-01-26 10:39:02 villeaka

謝謝您的回答，但我得到了「undefined不是函數（評估'this.renderHomepage（navigator）'）」，我該如何找到函數？ – Herdotage

獨立提出的導航邏輯Villeaka是用於讀取和分析更爲清楚。

在「renderScene」範圍內調用「this.renderHomepage（navigator）」方法，因此其中的「this」指的是「renderScene」而不是NavigatorTest組件，將「this」傳遞給像下面這樣的新變量：

renderScene(route, navigator) { 
var me = this; 
switch(route.id) { 
    case 'Homepage': 
    return me.renderHomepage(navigator); 
    case 'Detailpage': 
    return me.renderDetailpage(navigator); 
    default: 
    throw new Error('No route found for id ' + route.id); 
}}

來源

2016-10-10 06:12:42 Bingxin

我認爲您的導航看起來有點搞砸了，我發現這個視頻做起來很簡單

https://www.youtube.com/watch?v=jGOst2TLha0

順便說一句，我的快，雖然在你的代碼是

<Navigator style = {{flex:1}} 
    initialRoute = {{name: defaultName,component:Homepage }} 
    configureScene = {() => { 
     return Navigator.SceneConfigs.VerticalDownSwipeJump ; 
    }} 
    renderScene = {(route,navigator) => { 
     let Component = route.component ; 
     if (route.component) { 
     return <Component {...route.params} navigator = {navigator} /> 
     } 
}} />

那「讓組件」看起來不正確的，因爲變量名不應該是相同的代碼的頂級進口「組件」庫，導致模棱兩可

來源

2016-11-05 19:44:06

React-native Android Navigator -scene blank

回答

相關問題