Android React本机导航不工作_Android_React Native_React Native Navigation

Android React本机导航不工作

android react-native

Android React本机导航不工作,android,react-native,react-native-navigation,Android,React Native,React Native Navigation,我正在尝试使用react native navigation在两个屏幕之间导航。它正在从index.js运行到EnableNotification.js，但它没有从EnableNotification.js运行到CreateMessage.js EnableNotification.js /** * https://github.com/facebook/react-native * @flow */ import React, { Component } from "react"; i

我正在尝试使用react native navigation在两个屏幕之间导航。它正在从

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

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

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} />
 } 
}

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

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

/**
* https://github.com/facebook/react-native
*@flow
*/
从“React”导入React，{Component}；
从“react native”导入{视图、文本、图像、按钮、样式表}；
从“react navigation”导入{StackNavigator}；
从“/styles”导入样式；
将*作为字符串从“/strings”导入；
从“/CreateMessage”导入CreateMessage；
导出默认类EnableNotificationScreen扩展组件{
render（）{
const{navigate}=this.props.navigation；
返回(
{strings.enable_notification}
导航（“CreateMessage”）}
样式={{borderRadius:40}
/>
不是现在
);
}
}
const ScheduledApp=StackNavigator({
CreateMessage：{
屏幕：CreateMessage，
导航选项：{
标题：{
可见：假
}
}
}
});

CreateMessage.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
      }
    }
  }
});

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

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} />
 } 
}

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

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

import React，{Component}来自“React”；
从“react native”导入{视图、文本、图像、按钮、样式表}；
导出默认类CreateMessage扩展组件{
render（）{
返回你好世界！；
}
}

首先：

index.android.js或index.ios.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
      }
    }
  }
});

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

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} />
 } 
}

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

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

最后：

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

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

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} />
 } 
}

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

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

如果要返回，请执行函数goBack：

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

我希望这对你有帮助

这对我有效-

CreateMessage

组件需要是导航堆栈的一部分，以便通过

这个.props.navigator.navigate（）

您收到的是哪种错误消息？CreateMessage是否是

index.js

中导航堆栈的一部分？@zvona否我在index.js中只定义了两个，不确定是否正确CreateMessage组件需要是导航堆栈的一部分，以便通过

this.props.navigator.navigator（）

导航到那里。创建消息组件显示的“方向”是什么？启用通知是并行的还是深入堆栈？