react-native - 向我的 expo React native 应用程序添加飞溅时出错

Question

我有我的下一个飞溅，我的想法是能够在打开应用程序时显示我的应用程序 Logo ，然后转到应用程序的开始，它工作正常:

import React from 'react';
import { StyleSheet, Image, View, Text } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';

export default class Splash extends React.Component {
    
    
    goToScreen(routeName){
        const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: routeName })],
        });
        this.props.navigation.dispatch(resetAction);
    }   
    
    /*goToScreen(routeName){
        this.props.navigation.navigate(routeName)
    }*/

    componentDidMount(){
        setTimeout( () => {
            this.goToScreen('Home')
        }, 2000, this)
    }

    render(){
        return (
            <View style={styles.container}>
                <Image source={{uri: 'https://i.imgur.com/r0jUwOD.png'}} style={{width: 250, height: 250}} />
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#33B747',
        alignItems: 'center',
        justifyContent: 'center'
    },
});

问题是飞溅的位置，因为如果它以这种方式显示我，但它会创建一个名为 Splash 的下方按钮，另一方面，加载时的飞溅与下方按钮一起显示，不应该发生这种情况时，启动画面必须仅全屏显示，而不能创建按钮。

AppNavigator.js

import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import { createAppContainer } from 'react-navigation';
import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons';

import Splash from '../screens/Splash';
import NewsListScreen from '../screens/NewsListScreen';
import NewsItemScreen from '../screens/NewsItemScreen';


const StackNavigator = createStackNavigator({
    Splash: {
        screen: Splash,
        navigationOptions: {
            headerShown: false,
        }
    },
    News: {
        screen: NewsListScreen
    },
    Root: {
        screen: BottomTabNavigator,
    },
    NewsItem: {
        screen: NewsItemScreen,
        navigationOptions: {
            headerTitle: 'News Item'
        }
    },
    },{
        initialRouteName: 'Splash'
});

const BottomTabNavigator = createBottomTabNavigator({
    Home: {
        screen: StackNavigator,
        navigationOptions: {
            tabBarIcon: () => <MaterialIcons name="home" size={24} />
        }
    },
    News: {
        screen: StackNavigator,
        navigationOptions: {
            tabBarIcon: () => <MaterialCommunityIcons name="newspaper-variant-outline" size={24} />
        }
    }
})

export default createAppContainer(BottomTabNavigator);

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { AppLoading } from 'expo';
import { Provider } from 'react-redux';

import AppNavigator from './app/resources/navigation/AppNavigator';
import ReduxStore from './app/resources/redux/ReduxStore';

export default function App() {
    return (
        <Provider store={ReduxStore}>
            <AppNavigator />
        </Provider>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

在 imgur 中上传错误的附加捕获 capture 1和 capture 2

Answer 1

可以找到向 expo 管理的应用程序添加启动画面的推荐方法 here .

我已经成功地创建了一个 expo 项目并实现了您正在寻找的完全相同的行为。

我用过 react-navigation 4.x.x

这是它的外观，您可以找到 full code here

这是我用过的代码。

Splash.js

import React, { Component } from "react";
import { Text, SafeAreaView, View, StyleSheet } from "react-native";
import { StackActions, NavigationActions } from "react-navigation";

export class Splash extends Component {
  goToScreen(routeName) {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: routeName })],
    });
    this.props.navigation.dispatch(resetAction);
  }

  componentDidMount() {
    setTimeout(
      () => {
        this.goToScreen("Root");
      },
      2000,
      this
    );
  }

  render() {
    return (
      <SafeAreaView style={styles.mainContainer}>
        <Text style={styles.text}> Splash Screen </Text>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  mainContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#efef21",
  },
  text: {
    fontSize: 22,
  },
});

export default Splash;

Navigator.js

import { createStackNavigator } from "react-navigation-stack";
import { createAppContainer } from "react-navigation";
import Home from "./Home";
import Splash from "./Splash";
import TabNavigator from "./BottomTabNavigator";

const AppNavigator = createStackNavigator(
  {
    Splash: {
      screen: Splash,
      navigationOptions: {
        headerShown: false,
      },
    },
    Root: {
      screen: TabNavigator,
      navigationOptions: {
        headerShown: false,
      },
    },
  },
  {
    initialRouteName: "Splash",
  }
);

export default createAppContainer(AppNavigator);

BottomTabNavigator.js

import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import Home from "./Home";
import News from "./News";

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      title: "Home",
    },
  },
  News: {
    screen: News,
    navigationOptions: {
      title: "News",
    },
  },
});

export default createAppContainer(TabNavigator);

此外，我使用 react-navigation 5.x.x

实现了相同的行为

你可以找到我的代码here

编辑 01

如果你想要标题，你需要为每个选项卡使用一个Stack Navigator。

这是 BottomTabNAvigator.js 的更新代码

import { createAppContainer } from "react-navigation";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { createStackNavigator } from "react-navigation-stack";
import Home from "./Home";
import News from "./News";

const HomeStack = createStackNavigator({
  Home: Home,
});

const NewsStack = createStackNavigator({
  News: News,
});

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen: HomeStack,
    navigationOptions: {
      headerTitle: "Home",
      title: "Home",
    },
  },
  News: {
    screen: NewsStack,
    navigationOptions: {
      title: "News",
    },
  },
});

export default createAppContainer(TabNavigator);