StackNavigator在反應本機應用程序

Question

我已創建並通過使用create-react-native-app新反應本機應用程序。 我結束了一個在博覽會上運行良好的應用程序。 然後，我想從react-navigation中添加堆棧StackNavigator 我已經從reactnavigation.org流出了指南，並且我在應用程序目錄中做了npm install --save react-navigation。 唯一不同的是我使用create-react-native-app AwesomeProject而不是react-native init SimpleApp。

，我面臨的問題是，當我刪除默認的出口來回我的課，我得到錯誤檢查AwakeInDevApp：

代碼App.js的：

import React from 'react'; 
import { StyleSheet, Text, View, AppRegistry, Button } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

export default class App extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Hello, Chat App!</Text> 
     <Button 
      onPress={() => navigate('Chat')} 
      title="Chat with Lucy" 
     /> 
     </View> 
    ); 
    } 
} 

class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Chat with Lucy', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Chat with Lucy</Text> 
     </View> 
    ); 
    } 
} 

const SimpleApp = StackNavigator({ 
    Home: { screen: App }, 
    Chat: { screen: ChatScreen }, 
}); 

AppRegistry.registerComponent('SimpleApp',() => SimpleApp); 

Answer 1

由於您使用的創建-react-native-app，項目模板已經包含了App.js，我假設它是你在例子中提到的那個，你需要移除AppRegistry.registerComponent（'SimpleApp'，（）=> SimpleApp）;並將其替換爲導出默認SimpleApp，原因是應用程序的初始化已通過create-react-native-app完成，並且您只需爲您的案例提供主要組件SimpleApp包含所有屏幕的導航器

const SimpleApp = StackNavigator({ 
     Home: { screen: App }, 
     Chat: { screen: ChatScreen }, 
    }); 

請參見下面的代碼完整的例子

App.js的代碼：

import React from 'react'; 
import { StyleSheet, Text, View, AppRegistry, Button } from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class App extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Hello, Chat App!</Text> 
     <Button 
      onPress={() => navigate('Chat')} 
      title="Chat with Lucy" 
     /> 
     </View> 
    ); 
    } 
} 

class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Chat with Lucy', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Chat with Lucy</Text> 
     </View> 
    ); 
    } 
} 

const SimpleApp = StackNavigator({ 
    Home: { screen: App }, 
    Chat: { screen: ChatScreen }, 
}); 

export default SimpleApp; 

Answer 2

我之前也已經嘗試它，它有點混亂。我Sharlon同意，我們必須擺脫這一行：

AppRegistry.registerComponent('SimpleApp',() => SimpleApp);

因爲創建反應的原生應用內處理。除此之外，如果您使用的是android，則必須定義維度以使其顯示在模擬器或手機上。我在here中有一個反應導航的示例代碼。我希望它能幫助你！ ：d

import React from 'react'; 
 
import { ListView, Text, View, StyleSheet, Dimensions, Button } from 'react-native'; 
 
import { StackNavigator, TabNavigator } from 'react-navigation'; 
 
import { Constants } from 'expo'; 
 

 
class HomeScreen extends React.Component { 
 
    static navigationOptions = { 
 
    title: 'Welcome', 
 
    }; 
 
    render() { 
 
    const { navigate } = this.props.navigation; 
 
    return (
 
     <View> 
 
     <Text>Hello Chat app!</Text> 
 
     <Button 
 
      onPress={() => navigate('Chat', {'user': 'Lucy'})} 
 
      title="Chat with Lucy" 
 
     /> 
 
     </View> 
 
    ) 
 
    } 
 
} 
 

 
class ChatScreen extends React.Component { 
 
    static navigationOptions = ({ navigation }) => ({ 
 
    title: `Chat with ${ navigation.state.params.user }`, 
 
    }); 
 
    render() { 
 
    const { params } = this.props.navigation.state; 
 
    return (
 
     <View> 
 
     <Text>Chat with { params.user }</Text> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

 
class RecentChatsScreen extends React.Component { 
 
    render() { 
 
    return (
 
     <View> 
 
     <Text>List of recent chat.</Text> 
 
     <Button 
 
      onPress={() => this.props.navigation.navigate('Chat', {'user': 'Jane'})} 
 
      title="Chat with Jane" 
 
     /> 
 
     </View> 
 
    ) 
 
    } 
 
} 
 

 
class AllContactsScreen extends React.Component { 
 
    render() { 
 
    return (
 
     <View> 
 
     <Text>List of all contact.</Text> 
 
     <Button 
 
      onPress={() => this.props.navigation.navigate('Chat', {'user': 'Lucy'})} 
 
      title="Chat with Lucy" 
 
     /> 
 
     </View> 
 
    ) 
 
    } 
 
} 
 

 
const MainScreenNavigator = TabNavigator({ 
 
    Recent: { screen: RecentChatsScreen }, 
 
    All: { screen: AllContactsScreen }, 
 
}) 
 

 
const SimpleApp = StackNavigator({ 
 
    Home: { 
 
    screen: MainScreenNavigator, 
 
    navigationOptions: { 
 
     title: 'My Chats', 
 
    }, 
 
    }, 
 
    Chat: { screen: ChatScreen }, 
 
}) 
 

 
export default class App extends React.Component { 
 
    render() { 
 
    return (
 
     <View style={styles.container}> 
 
     <SimpleApp style={{ width: Dimensions.get("window").width }} /> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
    flex: 1, 
 
    justifyContent: 'center', 
 
    paddingTop: Constants.statusBarHeight, 
 
    backgroundColor: '#ecf0f1', 
 
    } 
 
})