all! I am engaged on a React Native
venture, however I am new to this tech stack. Presently, I need to make the transitions between the splash display screen and the principle display screen a lot smoother, and I’ve looked for options from ChatGpt
, however they aren’t working. How can I repair this situation?
Right here is my code:
import { StatusBar } from 'expo-status-bar';
import { Animated, StyleSheet, Textual content, View } from 'react-native';
import { Hyperlink, NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import { Ionicons } from '@expo/vector-icons';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import HomeScreen from "./src/screens/HomeScreen";
import ProfileScreen from "./src/screens/ProfileScreen";
import AlertScreen from "./src/screens/AlertScreen";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useEffect, useState, useCallback, useRef } from 'react';
import * as SplashScreen from "expo-splash-screen";
// Maintain the splash display screen seen whereas we fetch assets
SplashScreen.preventAutoHideAsync();
export default perform App() {
const [appIsReady, setAppIsReady] = useState(false);
const opacity = useRef(new Animated.Worth(1)).present;
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
const screenOptions = ({ route }) => ({
tabBarIcon: ({ foucused, coloration, dimension }) => {
let iconName;
if (route.title === "House") {
iconName = foucused ? "ios-home" : "ios-home-outline";
} else if (route.title === "Alert") {
iconName = foucused ? "ios-alert-circle" : "ios-alert-circle-outline";
} else {
iconName = foucused ? "person-circle" : "person-circle-outline";
}
return <Ionicons title={iconName} dimension={dimension} coloration={coloration} />;
},
tabBarInactiveTintColor: 'grey',
});
useEffect(() => {
const prepareApp = async () => {
// 执行其他异步的准备操作
strive {
// await new Promise(resolve => setTimeout(resolve, 2000));
} catch (e) {
console.warn(e);
} lastly {
// Inform the applying to render
setAppIsReady(true);
}
};
prepareApp();
}, []);
const hideSplashScreen = async () => {
await SplashScreen.hideAsync();
};
const onLayoutRootView = useCallback(async () => {
if (appIsReady) {
Animated.timing(opacity, {
toValue: 0,
period: 1000,
useNativeDriver: true,
}).begin(hideSplashScreen);
}
}, [appIsReady]);
if (!appIsReady) {
return null;
}
return (
<Animated.View onLayout={onLayoutRootView} fashion={{ flex: 1 }}>
< NavigationContainer>
< Tab.Navigator initialRouteName="House" screenOptions={screenOptions} >
<Tab.Display screen title="House" element={HomeScreen} choices={{ title: "首页" }} />
<Tab.Display screen title="Alert" element={AlertScreen} choices={{ title: "告警", tabBarBadge: 3 }} />
<Tab.Display screen title="Profile" element={ProfileScreen} choices={{ title: "我" }} />
{/* 添加其他导航屏幕 */}
</Tab.Navigator >
<StatusBar animated={true} fashion="mild" />
</NavigationContainer >
</Animated.View>
);
}
const types = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'heart',
justifyContent: 'heart',
},
});
And that is the package deal.json
for my venture:
{
"title": "comnova-net",
"model": "1.0.0",
"predominant": "node_modules/expo/AppEntry.js",
"scripts": {
"begin": "expo begin",
"android": "expo begin --android",
"ios": "expo begin --ios",
"internet": "expo begin --web"
},
"dependencies": {
"@react-navigation/bottom-tabs": "^6.5.7",
"@react-navigation/native": "^6.1.6",
"@react-navigation/native-stack": "^6.9.12",
"expo": "~48.0.15",
"expo-splash-screen": "~0.18.2",
"expo-status-bar": "~1.4.4",
"react": "18.2.0",
"react-native": "0.71.7",
"react-native-safe-area-context": "^4.5.3",
"react-native-screens": "^3.20.0",
"react-native-splash-screen": "^3.3.0"
},
"devDependencies": {
"@babel/core": "^7.20.0"
},
"non-public": true
}
If there’s any issues with my description, please let me know.