有沒有辦法使用 React Native Navigation 為應用程序而不是 App.js 制作主屏幕？

Question

我是 React Native 的初學者，遇到了導航問題。 我希望我的 App.js 屏幕用於導航，但我希望另一個文件作為主屏幕。 有沒有辦法做到這一點？ 這是我的 App.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>
    );
  }
}

這是您的案例的完整小吃示例，它是從 react-navigation 基本示例擴展而來的，請檢查他們的文檔。