React本机导航无法正常工作

我正尝试在两个屏幕之间使用反应本机导航https://reactnavigation.org/进行导航。它是由index.js努力EnableNotification.js，但它不是从EnableNotification.js工作，CreateMessage.jsReact本机导航无法正常工作

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

来源

2017-04-25 N Sharma

消息_您收到什么样的_error导航呢？ 'index.js'中的导航堆栈的CreateMessage部分是什么？ – zvona

@zvona不，我在index.js中只定义了两个不确定它是否正确https://pastebin.com/6uHrh0Re –

** CreateMessage **组件需要成为导航堆栈的一部分，才能通过' this.props.navigator.navigate（）'。什么是创建消息组件显示的“方向”？它与启用通知并行还是更深入？ – zvona

这为我工作 - CreateMessage组件提供所需的导航堆栈的一部分，以便通过this.props.navigator.navigate(<name>)

来源

2017-04-27 07:21:48

第一：

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

我希望这会帮助你！

来源

2017-04-25 15:54:09

React本机导航无法正常工作

回答

相关问题