阵营原生的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导航仪错误

回答

相关问题