React Native 导航不工作

Question

我正在尝试使用 react-native 导航在两个屏幕之间导航 https://reactnavigation.org/。它从 index.js 到 EnableNotification.js 工作，但从 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

第一个：

index.android.js 或 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} />
 } 
}

之后:

index.js

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

最后：

EnableNotification.js

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

如果你想回去，做一个函数 goBack :

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

希望对您有所帮助！

Answer 2

这对我有用 - CreateMessage 组件需要成为导航堆栈的一部分才能通过 this.props.navigator.navigate(<name>)

导航到那里

React Native 导航不工作

React Native navigation is not working

android

react-native

react-native-navigation