使用导航器 onPress 进行 React Native 渲染和切换

Question

一周前我刚刚开始使用 React Native 进行开发。 谁能帮助我进行简单的渲染并将 onPress 切换到另一个视图？

我已经阅读了大量示例，但其中大部分都被删减或不是很好的文档，就像在 FaceBook Doc 页面上一样。 Nav 没有完整的示例。

这是已经完成的工作 - 应该首先呈现的视图：

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

export default class SignUp extends Component {
  buttonClicked() {
    console.log('Hi');
    this.props.navigator.push({title: 'SignUp', component:SignUp});
  }

  render() {
    var TouchableElement = TouchableHighlight;
    if (Platform.OS === ANDROID_PLATFORM) {
      TouchableElement = TouchableNativeFeedback;
    }
    return (
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to Cross-Profi!
          </Text>
          <Text style={styles.field_row}>
            <TextInput style={styles.stdfield} placeholder="Profession" />
          </Text>
          <Text style={styles.field_row}>
            <TextInput style={styles.stdfield} placeholder="E-mail" />
          </Text>
          <Text style={styles.field_row}>
            <TextInput style={styles.stdfield} secureTextEntry={true} placeholder="Password" />
          </Text>
          <TouchableElement style={styles.button} onPress={this.buttonClicked.bind(this)}>
            <View>
              <Text style={styles.buttonText}>Register</Text>
            </View>
          </TouchableElement>
          {/* <Image source={require("./img/super_car.png")} style={{width:120,height:100}} />*/}
          <Text style={styles.instructions}>
            Press Cmd+R to reload,{'\n'}
            Cmd+D or shake for dev menu
          </Text>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'lightblue',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
    color: 'darkred',
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  field_row: {
    textAlign: 'center',
    color: '#999999',
    margin: 3,
  },
  stdfield: {
    backgroundColor: 'darkgray',
    height: 50,
    width: 220,
    textAlign: 'center'
  },
  button: {
    borderColor:'blue',
    borderWidth: 2,
    margin: 5
  },
  buttonText: {
    fontSize: 18,
    fontWeight: 'bold'
  }
});

const ANDROID_PLATFORM = 'android';

应该呈现不同视图的导航器类：

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

var MainActivity = require('./app/MainActivity.js');
var SignUp = require('./app/SignUp.js');

class AwesomeProject extends Component {
  /*constructor(props) {
    super(props);
    this.state = {text: ''};
  }*/

  render() {
    // this.props.navigator.push({title:'SignUp'});
    return (
      <Navigator initialRoute={{title:'SignUp', component:SignUp}}
      configureScene={() => {
                    return Navigator.SceneConfigs.FloatFromRight;
                }}
      renderScene={(route, navigator) =>
        {
          console.log(route, navigator);
          if (route.component) {
            return React.createElement(route.component, {navigator});
          }
        }
      } />
    );
  }
}

const ANDROID_PLATFORM = 'android';

const routes = [
  {title: 'MainActivity', component: MainActivity},
  {title: 'SignUp', component: SignUp},
];

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

似乎并不清楚是否必须有一个类的require，并将类声明为export default。

有一个错误：元素类型无效：期望一个字符串，...但得到了对象等

提供示例帮助会很棒。谢谢

Answer 1

在您的 require 调用中，您应该替换它的 import 语句或使用 require 模块的默认属性，即：

var MainActivity = require('./app/MainActivity.js').default;

或使用

import MainActivity from "./app/MainActivity";

在 ES6 中，require 不会将模块的默认属性分配给变量。 请参阅此blog post 以更好地了解在 es6 中工作的要求