javascript - 有没有办法使用 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>
    );
  }
}

Here is full snack example for your case ，它是从react-navigation基本示例扩展而来的，请检查他们的文档。