向我的Expo React本机应用程序添加启动画面时出错 [英] error adding a splash to my expo react native app

问题描述

下一个问题是我的想法，我的想法是能够在打开应用程序时显示我的应用程序徽标，然后转到该应用程序的开头，效果很好:

  import从'react'导入React；从'react-native'导入{StyleSheet，Image，View，Text};从反应导航"导入{StackActions，NavigationActions}；导出默认类Splash扩展React.Component {goToScreen(routeName){const resetAction = StackActions.reset({索引:0，操作:[NavigationActions.navigate({routeName:routeName})]，});this.props.navigation.dispatch(resetAction);}/* goToScreen(routeName){this.props.navigation.navigate(routeName)} */componentDidMount(){setTimeout(()=> {this.goToScreen('Home')}，2000，此)}使成为(){返回 (<查看样式= {styles.container}><图片来源= {{uri:'https://i.imgur.com/r0jUwOD.png'}} style = {{width:250，height:250}}/></View>);}}const styles = StyleSheet.create({容器: {弹性:1，backgroundColor:'#33B747'，alignItems:'中心'，justifyContent:中心"}，}); 

问题在于启动画面的位置，因为这样可以显示启动画面，但会创建一个名为启动画面"的下部按钮，另一方面，加载时的启动画面与下部按钮一起显示，并且不应发生这种情况时，启动画面必须仅以全屏显示，而不创建按钮.

AppNavigator.js

  import从'react'导入React；从'react-navigation-stack'导入{createStackNavigator};从'react-navigation-tabs'导入{createBottomTabNavigator}；从反应导航"导入{createAppContainer}；从'@ expo/vector-icons'导入{MaterialIcons，MaterialCommunityIcons};从'../screens/Splash'导入Splash；从"../screens/NewsListScreen"导入NewsListScreen；从"../screens/NewsItemScreen"导入NewsItemScreen；const StackNavigator = createStackNavigator({飞溅:{屏幕:启动画面navigationOptions:{headerShown:否，}}，消息: {屏幕:NewsListScreen}，根: {屏幕:BottomTabNavigator，}，新闻条目:{屏幕:NewsItemScreen，navigationOptions:{headerTitle:新闻项"}}，}，{initialRouteName:'Splash'});const BottomTabNavigator = createBottomTabNavigator({家: {屏幕:StackNavigator，navigationOptions:{tabBarIcon:()=>< MaterialIcons name =" home"size = {24}/>}}，消息: {屏幕:StackNavigator，navigationOptions:{tabBarIcon:()=>< MaterialCommunityIcons name ="newspaper-variant-outline"；size = {24}/>}}})导出默认的createAppContainer(BottomTabNavigator); 

App.js

  import从'react'导入React；从'react-native'导入{StyleSheet，Text，View};从"expo"导入{AppLoading}；从'react-redux'导入{提供者}；从"./app/resources/navigation/AppNavigator"导入AppNavigator；从'./app/resources/redux/ReduxStore'导入ReduxStore;导出默认函数App(){返回 (< Provider store = {ReduxStore}>< AppNavigator/></Provider>);}const styles = StyleSheet.create({容器: {弹性:1，backgroundColor:#fff"，alignItems:'中心'，justifyContent:中心"，}，}); 

在 imgur

这是我使用的代码.

Splash.js

 从"react"导入React，{组件}；从"react-native"导入{Text，SafeAreaView，View，StyleSheet}；从反应导航"导入{StackActions，NavigationActions}；导出类Splash扩展了Component {goToScreen(routeName){const resetAction = StackActions.reset({索引:0，操作:[NavigationActions.navigate({routeName:routeName})]，});this.props.navigation.dispatch(resetAction);}componentDidMount(){setTimeout(()=>{this.goToScreen("Root");}，2000年这);}使成为() {返回 (< SafeAreaView style = {styles.mainContainer}><文本样式= {styles.text}>启动画面</Text></SafeAreaView>);}}const styles = StyleSheet.create({mainContainer:{弹性:1，justifyContent:中心"，alignItems:中心"，backgroundColor:#efef21"，}，文本: {fontSize:22，}，});导出默认的Splash; 

Navigator.js

 从"react-navigation-stack"导入{createStackNavigator}；从反应导航"导入{createAppContainer}；从"./Home"导入Home；从"./Splash"导入Splash；从"./BottomTabNavigator"导入TabNavigator；const AppNavigator = createStackNavigator({飞溅:{屏幕:启动画面navigationOptions:{headerShown:否，}，}，根: {屏幕:TabNavigator，navigationOptions:{headerShown:否，}，}，}，{initialRouteName:"Splash"，});导出默认的createAppContainer(AppNavigator); 

BottomTabNavigator.js

 从反应导航"导入{createAppContainer}；从"react-navigation-tabs"导入{createBottomTabNavigator}；从"./Home"导入Home；从"./News"导入新闻；const TabNavigator = createBottomTabNavigator({家: {屏幕:首页，navigationOptions:{标题:"Home"，}，}，消息: {屏幕:新闻，navigationOptions:{标题:新闻"，}，}，});导出默认的createAppContainer(TabNavigator); 

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

达到了相同的行为

您可以在

编辑01

如果要具有标题，则需要为每个选项卡使用 Stack Navigator .

这是 BottomTabNAvigator.js

的更新代码

 从反应导航"导入{createAppContainer}；从"react-navigation-tabs"导入{createBottomTabNavigator}；从"react-navigation-stack"导入{createStackNavigator}；从"./Home"导入Home；从"./News"导入新闻；const HomeStack = createStackNavigator({家:家，});const NewsStack = createStackNavigator({新闻:新闻，});const TabNavigator = createBottomTabNavigator({家: {屏幕:HomeStack，navigationOptions:{headerTitle:首页"，标题:"Home"，}，}，消息: {屏幕:NewsStack，navigationOptions:{标题:新闻"，}，}，});导出默认的createAppContainer(TabNavigator); 

I have my next splash, my idea is to be able to show my app logo when opening the application and then go to the start of the application, it works fine:

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'
    },
});

The problem is the location of the splash, since in this way if it shows me, but it creates a lower button called Splash, on the other hand the splash when loading is shown in conjunction with the lower buttons and that should not happen, the splash must display only in full screen and not create a button.

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',
    },
});

Attached capture of the error upload in imgur capture 1 and capture 2

解决方案

The recommended way to add a splash screen to an expo managed app can be found here.

I've managed to create an expo project and achieve the exact same behavior that you've looking for.

I've used react-navigation 4.x.x

This is how it looks and you can find the full code here

Here is the code I've used.

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);

Also, I've achieved the same behavior using react-navigation 5.x.x

You can find my code here

Edit 01

If you want to have the headers, You need to use a Stack Navigator for each tab.

Here is the updated code of 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);

这篇关于向我的Expo React本机应用程序添加启动画面时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！