React Native Navigation funktioniert nicht

Question

Ich versuche, zwischen zwei Bildschirm mit reaktionsnativen Navigation navigieren https://reactnavigation.org/. Es arbeitet index.js-EnableNotification.js aber es funktioniert nicht EnableNotification.js-CreateMessage.js

EnableNotification.js

/** 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from "react"; 
import { View, Text, Image, Button, StyleSheet } from "react-native"; 
import { StackNavigator } from "react-navigation"; 
import styles from "./Styles"; 
import * as strings from "./Strings"; 
import CreateMessage from "./CreateMessage"; 

export default class EnableNotificationScreen extends Component { 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View style={styles.container}> 
     <Image source={require("./img/enable_notification.png")} /> 
     <Text style={styles.textStyle}> {strings.enable_notification} </Text> 
     <View style={{ width: 240, marginTop: 30 }}> 
      <Button 
      title="ENABLE NOTIFICATION" 
      color="#FE434C" 
      onPress={() => navigate("CreateMessage")} 
      style={{ borderRadius: 40 }} 
      /> 
     </View> 
     <Text 
      style={{ 
      textAlign: "center", 
      marginTop: 10 
      }} 
     > 
      NOT NOW 
     </Text> 
     </View> 
    ); 
    } 
} 

const ScheduledApp = StackNavigator({ 
    CreateMessage: { 
    screen: CreateMessage, 
    navigationOptions: { 
     header: { 
     visible: false 
     } 
    } 
    } 
}); 

CreateMessage.js

import React, { Component } from "react"; 
import { View, Text, Image, Button, StyleSheet } from "react-native"; 

export default class CreateMessage extends Component { 
    render() { 
    return <View><Text>Hello World!</Text></View>; 
    } 
} 

Answer 1

Das ist für mich gearbeitet - CreateMessage Komponente muss ein Teil des Navigationsstapel zu navigieren, um dort durch this.props.navigator.navigate(<name>)

Answer 2

Erstens:

index.android.js oder index.ios.js

import React, { Component } from 'react'; 
import { AppRegistry, Navigator } from 'react-native'; 

import Index from './app/Index'; 
import CreateMessage from './app/CreateMessage'; 
import EnableNotification from './app/EnableNotification'; 

render() { 
return (
    <Navigator 
    initialRoute={{screen: 'Index'}} 
    renderScene={(route, nav) => {return this.renderScene(route, nav)}} 
    /> 
) 
} 

renderScene(route,nav) { 
switch (route.screen) { 
    case "Index": 
    return <Index navigator={nav} /> 
    case "EnableNotification": 
    return <EnableNotification navigator={nav} /> 
    case "CreateMessage": 
    return <CreateMessage navigator={nav} /> 
} 
} 

Danach:

index.js

goEnableNotification() { 
    this.props.navigator.push({ screen: 'EnableNotification' }); 
    } 

Endlich:

EnableNotification .js

goCreateMessage() { 
    this.props.navigator.push({ screen: 'CreateMessage' }); 
    } 

Wenn Sie zurück gehen wollen, tun eine Funktion goBack:

goBack() { 
    this.props.navigator.pop(); 
} 

Ich hoffe, dies wird Ihnen helfen!