React native 使用navigator onPress进行本机渲染和切换

我一周前刚开始用React Native开发。 有人能帮我简单渲染并切换到另一个视图吗

我读过一些例子，但大多数都是被删减或不好的文档，就像在FaceBook文档页面上一样。没有完整的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}来自'React'；
进口{
评估学，
样式表，
文本，
看法
形象,，
文本输入，
触控高光，
可触摸的本地反馈，
平台，
领航员
}从“反应本机”；
导出默认类注册扩展组件{
按钮点击（）{
console.log（'Hi'）；
this.props.navigator.push（{title:'SignUp'，component:SignUp}）；
}
render（）{
var TouchableElement=TouchableHighlight；
if（Platform.OS==ANDROID_平台）{
TouchableElement=TouchableNativeFeedback；
}
返回(
欢迎来到Cross Profi！
登记
{/* */}
按Cmd+R重新加载，{'\n'}
用于开发菜单的Cmd+D或shake
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“浅蓝色”，
},
欢迎:{
尺寸：20，
textAlign:'中心'，
差额：10，
颜色：“暗色”，
},
说明：{
textAlign:'中心'，
颜色：'#333333'，
marginBottom:5，
},
字段_行：{
textAlign:'中心'，
颜色：“#999999”，
差额：3，
},
标准字段：{
背景颜色：“暗光”，
身高：50，
宽度：220，
textAlign:“中心”
},
按钮：{
边框颜色：'蓝色'，
边界宽度：2，
保证金：5
},
按钮文字：{
尺码：18，
fontWeight:“粗体”
}
});
const ANDROID_PLATFORM='ANDROID'；

应呈现不同视图的Navigator类：

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);

import React，{Component}来自'React'；
进口{
评估学，
样式表，
文本，
看法
平台，
领航员
}从“反应本机”；
var MainActivity=require（'./app/MainActivity.js'）；
var SignUp=require（'./app/SignUp.js'）；
类AwesomeProject扩展组件{
/*建造师（道具）{
超级（道具）；
this.state={text:'}；
}*/
render（）{
//this.props.navigator.push（{title:'SignUp'}）；
返回(
{
从右侧返回Navigator.sceneconfig.floatfrom；
}}
renderScene={（路线、导航器）=>
{
控制台日志（路线、导航器）；
if（路由组件）{
返回React.createElement（route.component，{navigator}）；
}
}
} />
);
}
}
const ANDROID_PLATFORM='ANDROID'；
常数路由=[
{标题：'MainActivity'，组件：MainActivity}，
{title:'SignUp'，组件：SignUp}，
];
AppRegistry.registerComponent（'AwesomeProject'，（）=>AwesomeProject）；

似乎不清楚是否必须有类的

require

，并将类声明为

export default

出现错误：元素类型无效：应为字符串。。。但有目标等

---

举例帮助会很好。Thx

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

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

或使用

import MainActivity from "./app/MainActivity";

在ES6中，require不会将模块的默认属性分配给变量。

---

请参阅此部分，以更好地了解在es6中使用require的情况。在require调用中，您应该替换它的import语句或使用require模块的默认属性，即：

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

或使用

import MainActivity from "./app/MainActivity";

在ES6中，require不会将模块的默认属性分配给变量。

---

请参阅此页，以更好地了解在es6中工作的需求

请尝试此返回（）；并将其修复为（route.title=='SignUp'）尝试此返回（）；就像（route.title=='SignUp'）一样进行修改好的，谢谢你-我们已经完成了问题的第一部分，第二部分是关于如何在场景之间切换的问题？哦，那没什么大不了的-也完成了，谢谢同志。好的，谢谢你-我们已经完成了问题的第一部分，第二部分是关于如何在场景之间切换的问题？哦，这没什么大不了的，谢谢你，同志。