发现好多人的
react-native-splash-screen有些问题，今天总结写下，供大家参考！
1.项目根目录下执行
npm i react-native-splash-screen --save
2.项目根目录下执行
react-native link react-native-splash-screen
3.确保android/settings.gradle里有(link后已自动添加)
include ':react-native-splash-screen'
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
4.确保android/app/build.gradle里有(llink后已自动添加)
dependencies {
...
compile project(':react-native-splash-screen') //here
}
5.确保android/app/src/main/java/com/xxxxx/MainApplication.java里有(link后已自动添加)
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;
public class MainApplication extends Application implements ReactApplication {
...
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SplashScreenReactPackage() //here
);
}
};
...
}
6.确保android/app/src/main/java/com/xxxxx/MainActivity.java里有
import android.os.Bundle; // here
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here
public class MainActivity extends ReactActivity {
...
//添加以下全部代码
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this);
super.onCreate(savedInstanceState);
}
//添加结束
...
}
7.在android/app/src/main/res下创建 layout 文件夹，在layout文件夹下创建launch_screen.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/launch_screen">
</LinearLayout>
8.在android/app/src/main/res/values文件夹下创建color.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="primary_dark">#000000</color>
</resources>
9.在android/app/src/main/res下创建 drawable-xhdpi和drawable-xxhdpi 文件夹，分类在两个文件夹内添加启动页图片，图片名称:launch_screen
10.重新安装app会出现以下错误：
image.png
方法如下：将箭头出的false改为true
image.png
11.在App.js下添加以下代码：
import SplashScreen from 'react-native-splash-screen';
export default class WelcomePage extends Component {
componentDidMount() {
SplashScreen.hide();
}
}
ios配置：执行react-native link react-native-splash-screen后，已自动配置完成。
1.启动屏设置：
image.png
2.按不同尺寸将启动图添加进去（切记！切记！尺寸一定要对，否则会报错！！！）：
image.png
尺寸如下：
image.png
image.png
3.如图所示进行以下配置：
image.png
配置完成！！！
效果图：
image.png
如需要开启页延时消失，加延时器即可(模拟器需重新安装下app,command+R和reload是不行的)
constructor(props){
super(props);
this.state={
};
this.delayed=this.delayed.bind(this) //添加此代码
}
//添加此代码
delayed(){
SplashScreen.hide();
}
componentDidMount(){
setTimeout(()=>{this.delayed()}, 3000) //添加此代码
}
亲测没有问题，觉得有用的小伙伴点个小红心就行😄，么么哒。
