在我的博览会反应原生应用程序中添加飞溅时出错

Posted 2023-02-19

【中文标题】在我的博览会反应原生应用程序中添加飞溅时出错

【英文标题】：error adding a splash to my expo react native app

【发布时间】：2021-04-04 04:20:36

【问题描述】：

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

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

附上imgurcapture 1和capture 2中的错误上传截图

【问题讨论】：

@MuhammadNuman 如果我做了朋友，但它不起作用，它仍然像我问题中所附图像的捕获之一。

【参考方案1】：

可在 here 找到向 expo 托管应用添加启动画面的推荐方法。

我已经成功创建了一个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);

【讨论】：

评论不用于扩展讨论；这个对话是moved to chat。

【参考方案2】：

您在BottomTabNavigator 中使用了Splash: screen: Splash,，因此显然它会在底部导航器上添加飞溅。 从BottomTabNavigator 中删除Splash: screen: Splash, 并将其粘贴到StackNavigator 并将splash 设置为initialRouteName

const StackNavigator = createStackNavigator(
    News: 
        screen: NewsListScreen
    ,
    Splash: screen: Splash,
    NewsItem: 
        screen: NewsItemScreen,
        navigationOptions: 
            headerTitle: 'News Item'
        
    ,
,
   
       initialRouteName : 'Splash'
    );

【讨论】：

嗨@Rahul，你确定这应该像这样 initialRouteName : 'Splash' ，因为编辑将我标记为错误吗？

这部分错误 initialRouteName : 'Splash' friend

是的，如果您需要参考，请查看 - ***.com/questions/46684007/…

我错过了一个，请稍等让我编辑答案

没有朋友，它也解决不了问题，Splash 保持激活状态，Splash 就像加载一样，不应该保持，只有在打开应用程序时，暂时它看起来像这样：i.imgur.com/JGUQvhP.png

【参考方案3】：

您必须将启动屏幕移动到 StackNavigator 并将 BottomTabNavigator 添加到 StackNavigator 中作为这样的屏幕

import React from 'react';
import  createStackNavigator  from 'react-navigation-stack';
import  createBottomTabNavigator  from 'react-navigation-tabs';
import  createAppContainer  from 'react-navigation';
import  MaterialIcons  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
    ,
    Home: 
        screen: BottomTabNavigator
    ,
    News: 
        screen: NewsListScreen
    ,
    NewsItem: 
        screen: NewsItemScreen,
        navigationOptions: 
            headerTitle: 'News Item'
        
    
,

    initialRouteName: "Splash",
);

const BottomTabNavigator = createBottomTabNavigator(
    Home: 
        screen: StackNavigator,
        navigationOptions: 
            tabBarIcon: () => <MaterialIcons name="home" size=24 />
        
    
)

export default createAppContainer(StackNavigator);

【讨论】：

错误：Error: The component for route 'Home' must be a React component. For example: import MyScreen from './MyScreen'; ... Home: MyScreen, You can also use a navigator: import MyNavigator from './MyNavigator'; ... Home: MyNavigator,

@Valentina 你应该导入带有类似import MyScreen from './MyScreen.js';的文件扩展名的屏幕@

但该文件在我的目录中不存在，这就是我认为的示例。

那么你必须用文件扩展名导入你的屏幕，因为我也遇到过我用导入文件扩展名解决的这类问题