错误添加飞溅到我的博览会反应本机应用程序 [英] error adding a splash to my expo react native app

问题描述

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

从'react'导入React；import { StyleSheet, Image, View, Text } from 'react-native';从反应导航"导入 { StackActions, NavigationActions };导出默认类 Splash 扩展 React.Component {去屏幕(路线名称){const resetAction = StackActions.reset({指数:0，动作:[NavigationActions.navigate({ routeName: routeName })],});this.props.navigation.dispatch(resetAction);}/*goToScreen(路由名称){this.props.navigation.navigate(routeName)}*/componentDidMount(){setTimeout(() => {this.goToScreen('首页')}, 2000, 这个)}使成为(){返回 (<查看样式={styles.container}><图片来源={{uri: 'https://i.imgur.com/r0jUwOD.png'}} style={{width: 250, height: 250}}/></查看>);}}const 样式 = StyleSheet.create({容器: {弹性:1，背景颜色:'#33B747'，alignItems: '中心',justifyContent: '中心'},});

问题是飞溅的位置，因为这样如果它显示给我，但它会创建一个名为 Splash 的下部按钮，另一方面，加载时的飞溅与下部按钮一起显示，不应该发生时，飞溅必须仅全屏显示，不能创建按钮.

AppNavigator.js

从'react'导入React；import { createStackNavigator } from 'react-navigation-stack';import { createBottomTabNavigator } from 'react-navigation-tabs';从反应导航"导入 { createAppContainer };从@expo/vector-icons"导入 { MaterialIcons, MaterialCommunityIcons };从 '../screens/Splash' 导入 Splash；从 '../screens/NewsListScreen' 导入 NewsListScreen；从 '../screens/NewsItemScreen' 导入 NewsItemScreen；const StackNavigator = createStackNavigator({飞溅:{屏幕:飞溅，导航选项:{标头显示:假，}},消息: {屏幕:新闻列表屏幕},根: {屏幕:BottomTabNavigator，},新闻项目:{屏幕:新闻项目屏幕，导航选项:{headerTitle: '新闻项目'}},},{初始路由名称:'飞溅'});const BottomTabNavigator = createBottomTabNavigator({家: {屏幕:StackNavigator，导航选项:{tabBarIcon: () =><MaterialIcons name="home";大小={24}/>}},消息: {屏幕:StackNavigator，导航选项:{tabBarIcon: () =><MaterialCommunityIcons name="newspaper-variant-outline";大小={24}/>}}})导出默认 createAppContainer(BottomTabNavigator);

App.js

从'react'导入React；从'react-native'导入{样式表，文本，视图}；从世博会"导入 { AppLoading };从'react-redux'导入{提供者}；从'./app/resources/navigation/AppNavigator'导入AppNavigator；从 './app/resources/redux/ReduxStore' 导入 ReduxStore；导出默认函数 App() {返回 (<提供者商店={ReduxStore}><AppNavigator/></提供者>);}const 样式 = StyleSheet.create({容器: {弹性:1，背景颜色:'#fff'，alignItems: '中心',justifyContent: '中心',},});

在 imgur 中附上错误上传的捕获

这是我使用过的代码.

Splash.js

import React, { Component } from "react";import { Text, SafeAreaView, View, StyleSheet } from react-native";从反应导航"导入 { StackActions, NavigationActions };导出类 Splash 扩展组件 {goToScreen(路由名称){const resetAction = StackActions.reset({指数:0，动作:[NavigationActions.navigate({ routeName: routeName })],});this.props.navigation.dispatch(resetAction);}componentDidMount() {设置超时(() =>{this.goToScreen(Root");},2000,这);}使成为() {返回 (<SafeAreaView style={styles.mainContainer}><文本样式={styles.text}>启动画面</Text></SafeAreaView>);}}const 样式 = StyleSheet.create({主容器:{弹性:1，justifyContent:中心"，alignItems:中心"，背景颜色:#efef21"，},文本: {字体大小:22，},});导出默认 Splash；

Navigator.js

import { createStackNavigator } from react-navigation-stack";import { createAppContainer } from react-navigation";从./Home"导入主页；从./Splash"导入飞溅；从./BottomTabNavigator"导入TabNavigator；const AppNavigator = createStackNavigator({飞溅:{屏幕:飞溅，导航选项:{标头显示:假，},},根: {屏幕:TabNavigator，导航选项:{标头显示:假，},},},{初始路由名称:飞溅"，});导出默认 createAppContainer(AppNavigator);

BottomTabNavigator.js

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

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

实现了相同的行为

你可以在

编辑 01

如果你想要标题，你需要为每个标签使用一个Stack Navigator.

这是BottomTabNAvigator.js

的更新代码

import { createAppContainer } from react-navigation";import { createBottomTabNavigator } from react-navigation-tabs";import { createStackNavigator } from react-navigation-stack";从./Home"导入主页；从./News"导入新闻；const HomeStack = createStackNavigator({家:家，});const NewsStack = createStackNavigator({新闻:新闻，});const TabNavigator = createBottomTabNavigator({家: {屏幕:HomeStack，导航选项:{headerTitle: "首页",标题:家"，},},消息: {屏幕:新闻堆栈，导航选项:{标题:新闻"，},},});导出默认 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);

这篇关于错误添加飞溅到我的博览会反应本机应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！