Question

我已经使用create-react-native-app创建了新的反应原生app。我最终得到了一个适用于世博会的应用程序。然后我想从react-navigation添加一个StackNavigator堆栈我已经从reactnavigation.org发布了指南，并在app目录中执行了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

由于您正在使用create-react-native-app，项目模板已包含App.js，我认为它是您在示例中提到的那个，您需要删除AppRegistry。 registerComponent（＆＃39; SimpleApp＆＃39;，（）=＆gt; SimpleApp）;并使用导出默认值SimpleApp替换它，原因是应用程序的初始化已经由create-react-native-app完成，您只需要在您的案例中为主要组件提供包含所有屏幕的导航器

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

因为create-react-native-app已经处理了它。除此之外，如果您使用的是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',
  }
})

StackNavigator in native本地应用

2 个答案: