启动画面反应原生之前的白屏
White screen before splash screen react native
我遇到一个问题,当我 运行 应用程序时,我的应用程序出现白屏并在启动画面前停留 2 秒,如何解决这个问题,
我正在使用 React-native 版本 61,我需要删除出现在启动画面之前的白屏,它只出现了 2 秒但我需要删除它,我搜索并尝试了,
<item name="android:windowDisablePreview">true</item>
in android 但是没有解决问题
这是我的代码“AppInitializer”
import React from 'react';
import {Alert} from 'react-native';
import AppNavigator from './router';
import SplashScreen from './SplashScreen';
import {InitializApp} from './actions/SettingsActions';
import {connect} from 'react-redux';
import NavigationService from './util/NavigationService';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {fcmService} from './util/FCMService';
class AppInitializer extends React.Component {
constructor(props) {
super(props);
}
async componentDidMount() {
/*************************************
* Push Notification
*************************************/
fcmService.requestPermission();
await fcmService.registerAppWithFCM();
await fcmService.register(
onRegister,
onNotification, // inapp notification
onOpenNotification, // fron notification center
);
async function onRegister(token) {
const oldDeviceToken = await AsyncStorage.getItem('deviceToken');
if (oldDeviceToken != token) {
await AsyncStorage.setItem('deviceToken', token);
// await AsyncStorage.setItem('oldDeviceToken', oldDeviceToken);
}
}
function onNotification(notify, data) {
console.log('onNotification', notify);
console.log('onNotification', data);
let buttons = [];
if (data.hasOwnProperty('type') && data.type == 'category') {
buttons[0] = {
text: 'إلغاء',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
};
buttons[1] = {
text: 'اذهب للقسم',
onPress: () => {
NavigationService.navigate('categorydetails', {
category_id: data.id,
});
},
};
} else if (data.hasOwnProperty('type') && data.type == 'product') {
buttons[0] = {
text: 'إلغاء',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
};
buttons[1] = {
text: 'اذهب للمنتج',
onPress: () => {
NavigationService.navigate('productdetails', {
product_id: data.id,
});
},
};
} else {
buttons[0] = {
text: 'موافق',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
};
}
Alert.alert(notify.title, notify.body, buttons, {cancelable: true});
}
function onOpenNotification(notify, data) {
console.log('onOpenNotification', data);
if (data.hasOwnProperty('type') && data.type == 'category') {
NavigationService.navigate('categorydetails', {
category_id: data.id,
});
} else if (data.hasOwnProperty('type') && data.type == 'product') {
NavigationService.navigate('productdetails', {
product_id: data.id,
});
} else {
Alert.alert(
notify.title,
notify.body,
[
{
text: 'موافق',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
],
{cancelable: true},
);
}
}
/*************************************
* Push Notification
*************************************/
this.props.InitializApp();
}
render() {
if (this.props.Loaded) {
return (
<AppNavigator
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
);
} else return <SplashScreen />;
}
}
const mapStateToProps = state => ({Loaded: state.settings.Loaded});
const mapDispatchToProps = dispatch => ({
InitializApp: () => dispatch(InitializApp()),
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(AppInitializer);
您需要在启动画面对用户可见时执行此过程,此时渲染将无法显示任何内容,因此您什么也得不到,只有白屏...
请使用这个“npm i react-native-splash-screen --save”正确配置然后再次检查...
我遇到一个问题,当我 运行 应用程序时,我的应用程序出现白屏并在启动画面前停留 2 秒,如何解决这个问题, 我正在使用 React-native 版本 61,我需要删除出现在启动画面之前的白屏,它只出现了 2 秒但我需要删除它,我搜索并尝试了,
<item name="android:windowDisablePreview">true</item>
in android 但是没有解决问题
这是我的代码“AppInitializer”
import React from 'react';
import {Alert} from 'react-native';
import AppNavigator from './router';
import SplashScreen from './SplashScreen';
import {InitializApp} from './actions/SettingsActions';
import {connect} from 'react-redux';
import NavigationService from './util/NavigationService';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {fcmService} from './util/FCMService';
class AppInitializer extends React.Component {
constructor(props) {
super(props);
}
async componentDidMount() {
/*************************************
* Push Notification
*************************************/
fcmService.requestPermission();
await fcmService.registerAppWithFCM();
await fcmService.register(
onRegister,
onNotification, // inapp notification
onOpenNotification, // fron notification center
);
async function onRegister(token) {
const oldDeviceToken = await AsyncStorage.getItem('deviceToken');
if (oldDeviceToken != token) {
await AsyncStorage.setItem('deviceToken', token);
// await AsyncStorage.setItem('oldDeviceToken', oldDeviceToken);
}
}
function onNotification(notify, data) {
console.log('onNotification', notify);
console.log('onNotification', data);
let buttons = [];
if (data.hasOwnProperty('type') && data.type == 'category') {
buttons[0] = {
text: 'إلغاء',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
};
buttons[1] = {
text: 'اذهب للقسم',
onPress: () => {
NavigationService.navigate('categorydetails', {
category_id: data.id,
});
},
};
} else if (data.hasOwnProperty('type') && data.type == 'product') {
buttons[0] = {
text: 'إلغاء',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
};
buttons[1] = {
text: 'اذهب للمنتج',
onPress: () => {
NavigationService.navigate('productdetails', {
product_id: data.id,
});
},
};
} else {
buttons[0] = {
text: 'موافق',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
};
}
Alert.alert(notify.title, notify.body, buttons, {cancelable: true});
}
function onOpenNotification(notify, data) {
console.log('onOpenNotification', data);
if (data.hasOwnProperty('type') && data.type == 'category') {
NavigationService.navigate('categorydetails', {
category_id: data.id,
});
} else if (data.hasOwnProperty('type') && data.type == 'product') {
NavigationService.navigate('productdetails', {
product_id: data.id,
});
} else {
Alert.alert(
notify.title,
notify.body,
[
{
text: 'موافق',
onPress: () => console.log('Cancel Pressed'),
style: 'cancel',
},
],
{cancelable: true},
);
}
}
/*************************************
* Push Notification
*************************************/
this.props.InitializApp();
}
render() {
if (this.props.Loaded) {
return (
<AppNavigator
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
);
} else return <SplashScreen />;
}
}
const mapStateToProps = state => ({Loaded: state.settings.Loaded});
const mapDispatchToProps = dispatch => ({
InitializApp: () => dispatch(InitializApp()),
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(AppInitializer);
您需要在启动画面对用户可见时执行此过程,此时渲染将无法显示任何内容,因此您什么也得不到,只有白屏...
请使用这个“npm i react-native-splash-screen --save”正确配置然后再次检查...