Реагировать нативно с Expo, Spla sh не отображается на Chrome - PullRequest
Новая
       9

Реагировать нативно с Expo, Spla sh не отображается на Chrome

0 голосов
/ 12 апреля 2020

Я начал проект с использованием React Native и Expo, но застрял в основах, протестировал экран Spla sh.

Когда я запускаю с npm run web и открываю Chrome, я симулируйте медленный 3G, но я вижу белый экран, пока все не загружено, я не вижу свой файл Spla sh .png. Это ограничение симулятора Chrome или я что-то не так делаю?

Это мой app.json файл: 

{
  "name": "TSFitnessApp",
  "displayName": "TSFitnessApp",
  "expo": {
    "name": "TSFitnessApp",
    "slug": "TSFitnessApp",
    "version": "1.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "assetBundlePatterns": [
      "**/*"
    ],
    "splash": {
      "backgroundColor": "#FEF9B0",
      "image": "./assets/splash.png",
      "resizeMode": "contain"
    }
  }
}

Тогда мой Bootstrapper выглядит так: 

// core
import React, {Component} from 'react';

// libraries
import { AppLoading, SplashScreen } from 'expo';
import { Container, Text, Button } from 'native-base'
import { Col, Row, Grid } from 'react-native-easy-grid';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

// props and state
export type ComponentProps = {}
type ComponentState = {
    isReady: boolean
}

/**
 * Startup class
 */
export default class App extends React.Component<ComponentProps, ComponentState> {

    /**
     * Initialize an instance of the bootstrapper
     * @param props Initial properties
     */
    constructor(props : ComponentProps) {
        super(props);
        this.state = {
            isReady: false
        }
    }

    /**
     * Triggers when the Component is mounted
     * Load the Fonts and Icons
     */
    async loadResources() {
        await Font.loadAsync({
            Roboto: require('native-base/Fonts/Roboto.ttf'),
            Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
            ...Ionicons.font
        });
    }

    /**
     * Renders Main app or Splash Screen while loading
     */
    render() {
        if (!this.state.isReady) {
            return <AppLoading
              startAsync={this.loadResources}
              onFinish={() => this.setState({ isReady: true })}
              onError={console.warn}
            />;
        }

        return(
          <Container>
            <Grid style={{ alignItems: 'center', padding: 24}}>
                <Row size={50} style={{ alignItems: 'center'}}>
                  <Text style={{ textAlign: 'center'}}>Welcome screen, it will provide links to Login or Dashboard</Text>
                </Row>
                <Row size={50}>
                  <Col style={{margin: 12}}>
                  <Button light>
                    <Text>Click Here!</Text>
                  </Button>
                  </Col>
                  <Col style={{margin: 12}}>
                  <Button primary>
                    <Text>Click Here!</Text>
                  </Button>
                  </Col>
                </Row>
            </Grid>
          </Container>
    );
  }

}
...