Время управления заставкой React-Native - PullRequest
Новая
       48

Время управления заставкой React-Native

0 голосов
/ 11 июня 2018

Я хочу контролировать время моего заставки.Я изменил / создаю следующие файлы, чтобы сделать заставку, и она отлично работает.Но я не хочу использовать какую-либо библиотеку для этого.

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

Спасибо

Ответы [ 2 ]

0 голосов
/ 19 июля 2019

Реалистичная реакция-родной-экран-заставка имеет довольно хорошую реализацию для этого.

После установки и связывания собственных зависимостей вы можете управлять отображением заставки вваш собственный код:

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 вы можете указать, когда скрыть заставку

React Component: 

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

React Hooks (скрыть после загрузки компонента): 

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

// ...
0 голосов
/ 13 июня 2018

Вам не нужно создавать активность в папке android.все страницы и представления являются js-файлами внутри index.js, и вы можете переключаться между ними с помощью таких пакетов, как React Navigation .Для создания заставки вы можете создать файл splashScreen.js и вызвать его из index.js.В splashScreen.js вы можете установить таймер, и по истечении этого времени будет открываться ваша первая страница приложения (например, «Домашняя страница»).Это пример кода для 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>
        )
    }
}

Надеюсь, это поможет вам.

...