StackNavigator в нативном приложении для реагирования

Я создал и новое реагирующее нативное приложение, используя create-реагировать-нативное-приложение. Я закончил с приложением, которое хорошо работает на выставке. Затем я хочу добавить стек StackNavigator из react-navigation. Я передал руководство с reactnavigation.org и я сделал npm install --save react-navigation в каталоге приложения. Единственное отличие, которое я сделал, я использовал create-react-native-app AwesomeProject вместо react-native init SimpleApp.

Проблема, с которой я сталкиваюсь, заключается в том, что когда я удаляю экспорт по умолчанию для своего класса, я получаю сообщение об ошибке при проверке AwakeInDevApp: /Users/alex/Desktop/IMG_1277.PNG

Код 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);

react-native react-navigation
person Alex Terente    schedule 28.07.2017    source источник
comment
я не вижу метода AwakeInDevApp в вашем проекте, можете ли вы еще раз уточнить свою проблему с вашим проектом с полным кодом?   -  person muhammadaa    schedule 28.07.2017

Ответы (2)


arrow_upward
2
arrow_downward

Поскольку вы используете приложение create-react-native-app, шаблон проекта уже включает App.js, и я предполагаю, что это тот, который вы упомянули в своем примере, вам нужно удалить AppRegistry.registerComponent('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;
person Sharlon M. Balbalosa    schedule 28.07.2017

arrow_upward
1
arrow_downward

Я уже пробовал это раньше, и это немного сбивает с толку. Я согласен с Шарлоном, что мы должны избавиться от этой строки:

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

Потому что create-react-native-app справился с этим. Кроме того, если вы используете Android, вам нужно определить размер, чтобы он отображался на вашем симуляторе или телефоне. У меня есть пример кода реагирующей навигации здесь. Я надеюсь, что это поможет вам! :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',
  }
})

person Satrio Adi Prabowo    schedule 11.08.2017
comment
ваш фрагмент больше не работает, пожалуйста, обновите :) - person Kingalione; 19.04.2019