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

Question

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

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中的错误上传截图

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

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

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