React Native 导航不起作用答案

【问题标题】：React Native navigation is not workingReact Native 导航不起作用
【发布时间】：2017-04-25 15:07:01
【问题描述】：

我正在尝试使用 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>;
  }
}

【问题讨论】：

您收到什么样的错误消息？ CreateMessage 是index.js 中导航堆栈的一部分吗？
@zvona 不我在 index.js 中只定义了两个不确定是否正确pastebin.com/6uHrh0Re
CreateMessage 组件需要成为导航堆栈的一部分才能通过this.props.navigator.navigate(<name>) 导航到那里。 Create Message 组件显示的“方向”是什么？它是与启用通知并行还是深入堆栈？

标签： android react-native react-native-navigation

【解决方案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();
}

我希望这会对你有所帮助！

【讨论】：

【解决方案2】：

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

【讨论】：