0

本机应用程序开发这是我尝试过的

文件：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);

我的加载器组件：

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;

当我运行应用程序时出现错误 undefined is not a funtion(evalating 'this.props.renderScene(route,this)')

我已经通过观看 Youtube 上的一些教程来尝试这个，但我找不到我的问题的答案。

我想要做的是当应用程序启动时，我制作的加载器组件应该加载，然后从加载器组件我将用户重定向到登录组件，但目前我无法加载任何组件，因为它加载了我上面提到的错误。

4

2 回答 2

1

您可能对@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-21T12:17:04.443 回答
1

这是给您的示例代码： 

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-21T10:22:45.367 回答