Есть ли способ сделать домашний экран для приложения вместо приложения. js с помощью React Native Navigation?

Question

Я новичок в React Native и столкнулся с проблемой навигации. Я хочу, чтобы мой экран приложения. js использовался для навигации, но я хочу, чтобы другой файл был домашним экраном. Есть какой-либо способ сделать это? Это мое приложение. js код:

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {HomeScreen} from './components/HomeScreen';
const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Login: {screen: LoginScreen},
});

const App = createAppContainer(MainNavigator);
export default App;

А это код страницы, на которой я хочу сделать домашний экран:

import React from 'react';
import {SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Image, TouchableOpacity} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';

class HomeScreen extends Component {
render() {
const {navigate} = this.props.navigation;
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
<Image style={styles.logo} source={require('./components/images/img1.jpg')} />
              <Image style={styles.logo} source={require('./components/images/img2.jpg')} />
              <Image style={styles.logo} source={require('./components/images/img3.jpg')} />
              <Image style={styles.logo} source={require('./components/images/img4.jpg')} />
              <Image style={styles.logo} source={require('./components/images/img7.jpg')} />
              <Image style={styles.logo} source={require('./components/images/img8.jpg')} />
        </ScrollView>
      </SafeAreaView>
        </>
  );
};
}

Спасибо.

Answer 1

Чтобы сделать любой экран начальным, вы должны установить его в качестве параметра initialRouteName, например:

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Login: LoginScreen,
  }, {
    initialRouteName: "Home"
  }
);

Чтобы иметь возможность импортировать HomeScreen (или любой другой) из другого файла, вам необходимо экспортировать его из этого файла. Эта часть отсутствует в вашем примере.

import * as React from 'react';
import { Button, View, Text } from 'react-native';

export default class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

Вот полный пример закуски для вашего случая , он расширен от примера реакции-навигации c, проверьте их документацию.