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本機導航無法正常工作

回答

相關問題