Question

我想控制启动画面的时间。我更改/创建了下一个文件来实现启动，它完美地运行。但是我不想为此使用任何库。

android/app/src/main/java/com/MYAPP/SpashActivity.java android/app/src/main/AndroidManifest.xml android/app/src/main/values/styles.xml android/app/src/main/res/addedAllFoldersWithPNGLogos android/app/src/main/res/drawable/splash_background

由于

Answer 1

您不需要在android文件夹中创建活动。所有页面和视图都是index.js内的js文件，您可以通过React Navigation之类的包在它们之间切换。要创建启动画面，您可以制作splashScreen.js文件并从index.js调用它。在splashScreen.js中，您可以设置一个计时器，在此之后，您的第一页应用程序（例如Home）会调用。这是splashScreen.js的示例代码：

export default class SplashScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        setTimeout(() => {
            // go to Home page
        }, 2500)
    }

    render() {
        return (
            <View style={{ backgroundColor: 'white' }}>
                <View style={{ flex: 1, paddingTop: 50 }}>
                    <Text>Splash Screen</Text>
                </View>
            </View>
        )
    }
}

我希望这对你有所帮助。

Answer 2

react-native-splash-screen为此具有很好的实现。

一旦安装并链接了本机依赖关系，就可以控制何时以本机代码显示初始屏幕：

Android：

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

iOS：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];

    return YES;
}

然后在您的React代码中，您可以控制何时隐藏启动画面

反应成分：

componentDidMount() {
  // do stuff while splash screen is shown
  // After having done stuff (such as async tasks) hide the splash screen
  SplashScreen.hide();
}

反应挂钩（在加载组件后隐藏）：

  React.useEffect(() => {
    SplashScreen.hide();
  }, []);

React Hooks（在超时后隐藏）：

const [hideSplash, setHideSplash] = React.useState(false);

React.useEffect(() => {
  setTimeout(() => {
    setHideSplash(true);
  }, 1000); // amount of time the splash is shown from the time component is rendered
}, []);

React.useEffect(() => {
  hideSplash && SplashScreen.hide();
}, [hideSplash]);

// ...

React-Native Splash屏幕控制时间

2 个答案: