React Native导航无效

时间:2017-04-25 15:07:01

标签: android react-native react-native-navigation

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

2 个答案:

答案 0 :(得分:0)

第一:

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

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

答案 1 :(得分:0)

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