React 네비게이션으로 네이티브 렌더와 스위치 onPress

Question

저는 일주일 전에 React Native로 개발하기 시작했습니다. 누구나 간단한 렌더링으로 나를 도와주고 다른보기로 켜기를 전환 할 수 있습니까?

나는 예제의 음색을 읽었지만, 대부분은 FaceBook Doc 페이지 에서처럼 잘려나 보지 못했습니다. Nav와의 완벽한 완성 사례는 없었습니다. 여기

아직 무슨 짓을하고있다 - 1 렌더링해야보기 : 다른보기를 렌더링해야

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으로 선언되어야합니다.

은 오류가 있습니다 : 요소 유형이 유효하지 않습니다 : 문자열, ... 그러나 가지고 좋을 것 예제와 함께 등

도움말을 개체를 예상했다. 할당하지 않습니다 필요

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

또는 ES6에서

import MainActivity from "./app/MainActivity"; 

를 사용 : 당신의 요구 전화에서 들으

Answer 1

, 당신은 그것을 import 문 또는 필요 모듈 즉, 사용의 기본 속성을 교체해야 하나 변수의 모듈 기본 속성. es3에서 작업해야 할 필요성을보다 잘 이해하기 위해 blog post을 참조하십시오.