陣營原生的Android導航儀錯誤

文件：index.android.js

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Navigator, 
    TouchableHighlight, 
    Text, 
    View 
} from 'react-native'; 

var Loader = require('./app/components/Loader'); 
var Login = require('./app/components/Login'); 

export default class Demo extends Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 

    return (
     <Navigator> 
     initialRoute = {{ 
     id:'Loader', 
     }} 
     renderScene = {(route, navigator) => { 
      _navigator = navigator; 
      switch (route.id){ 
      case 'Loader': 
      return (<Loader navigator={navigator} route={route} title="Loader"/>); 
      case 'Login': 
      return (<Login navigator={navigator} route={route} title="Login"/>); 
      } 
     } 
     } 
     </Navigator> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
}); 

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

我Loader組件：

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    Text, 
    View, 
    Image 
} from 'react-native' 

class Loader extends Component{ 
    constructor(props) { 
     super(props); 
     this.state = { 
      id: 'Loader' 
     } 
    } 

    render(){ 
     return(
      <View style={styles.container}> 
       <Image source={require('../assets/img/ace-logo-white-01.png')} style={styles.logo}/> 
       <Text style={styles.loadingText}>Loading...</Text> 
      </View> 
     ) 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     justifyContent: 'center', 
     backgroundColor: 'red' 
    }, 
    logo: { 
     height: 30, 
     width: 50 
    }, 
    loadingText: { 
     flex:1, 
     fontSize: 25, 
     paddingTop: 20, 
     color: 'white' 
    } 
}); 

module.exports = Loader;

當我運行我得到錯誤的應用程序未定義不是函數（評估'this.props.renderScene（route，this）'）

我已經通過觀看Youtube上的一些教程來嘗試這一點，但我無法找到我的問題的答案。

我想要做的是，當應用程序啓動時，我所做的Loader組件應該加載，然後從加載程序組件將用戶重定向到Login組件，但目前我無法加載任何組件，因爲它加載了錯誤我上面說過。

來源

2017-03-21 Sushant Yadav

我得到了我的答案。這是我的一個愚蠢的錯誤。 –

這裏是一個示例代碼，您：

render() { 
    return (
     <Navigator 
     initialRoute={{ id: 'Sample', name: 'Index' }} 
     renderScene={this.renderScene.bind(this)} 
     configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight} 
     /> 
    ); } 

    renderScene = (route, navigator) => { 
    if (route.id === 'Sample') { 
     return (
     <Sample 
      navigator={navigator} 
     /> 
     ); 
    }  
}

來源

2017-03-21 10:22:45 JainZz

謝謝你的幫助。我試過你的解決方案，但它仍然給出了同樣的錯誤。 –

您可能已與由@JainZz給出的一些代碼的語法錯誤。試試這個

import Loader from './app/components/Loader' 
export default class Demo extends Component { 
    constructor(props) { 
    super(props); 
    } 

    render() { 
    return (
     <Navigator 
     initialRoute={{ id: 'Loader', name: 'Loader' }} 
     renderScene={this.renderScene.bind(this)} 
     configureScene={(route, routeStack) => Navigator.SceneConfigs.FloatFromRight} 
     /> 
    ); 
    } 
    renderScene = (route, navigator) => { 
    if (route.id === 'Loader') { 
     return (
     <Loader 
      navigator={navigator} 
     /> 
    ); 
    } 
    } 
}

來源

2017-03-21 12:17:04 Hariks

陣營原生的Android導航儀錯誤

回答

相關問題