Question

原生应用开发这就是我试过的

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

当我运行应用程序时，我收到错误未定义不是一个功能（评估'this.props.renderScene（route，this）'）

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

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

Answer 1

以下是您的示例代码：

{{1}}

Answer 2

您可能使用@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}
        />
      );
    }
  }
}

React-Native Navigator Android错误

2 个答案: