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', 
 
    } 
 
})