Question

我正在开发使用Expo实现的应用程序并做出本机反应。我在我的应用程序中有启动画面。启动画面加载屏幕中的图标在Android设备中正确但在IOS设备中非常小（在不同的dpi中）。我想根据加载时出现的dpi进行图标调整大小。任何人都可以帮助我在这里。谢谢。

配置文件： -

 "expo": {
    "name": "ExpoApp",
    "description": "No description",
    "slug": "evosus",
    "privacy": "unlisted", // public
    "sdkVersion": "19.0.0",
    "version": "1.0.0",
    "orientation": "portrait,landscape",
    "primaryColor": "green",
    "icon": "./assets/icons/ball.png",
    //"icon": "./assets/icons/logo_Dark.png",
    "notification": {
      "icon": "./assets/icons/ball.png",
      "color": "#000000"
    },
    "loading": {
      //"icon": "./assets/icons/loading-icon.png",
      "icon": "./assets/icons/icon.png",//I want to resize this icon based on screen dpi
      "hideExponentText": true
    },
    "packagerOpts": {
      "assetExts": [
        "ttf"
      ]
    },
    "ios": {
      "supportsTablet": true
    }
    //,"androidStatusBarColor": "#444444"
  }
}

App.js组件： -

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, SQLite } from 'expo';
import { Ionicons, EvilIcons } from '@expo/vector-icons';
import RootNavigation from './navigation/RootNavigation';

// Services
import DB from "./src/Services/DBDefinitionService";
import appService from "./src/Services/AppService";

console.ignoredYellowBox = [ 'Setting a timer' ];

export default class App extends React.Component {
  state = {
    assetsAreLoaded: false,
  };

  componentWillMount() {
    this._loadAssetsAsync();
    // Added by Anil G on 23/08/2017
    this.db_init();
    this.db_device_info_save();
  }

  render() {
    if (!this.state.assetsAreLoaded && !this.props.skipLoadingScreen) {
      return <AppLoading/>;
    } else {
      return (
        <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          {Platform.OS === 'android' &&
            <View style={styles.statusBarUnderlay} />}
          <RootNavigation />
        </View>
      );
    }
  }

  async _loadAssetsAsync() {
    try {
      await Promise.all([
        Asset.loadAsync([
          require('./assets/images/robot-dev.png'),
          require('./assets/images/robot-prod.png'),
        ]),
        Font.loadAsync([
          // This is the font that we are using for our tab bar
          Ionicons.font,
          EvilIcons.font,
          // We include SpaceMono because we use it in HomeScreen.js. Feel free
          // to remove this if you are not using it in your app
          { 'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
            'roboto-regular': require('./assets/fonts/Roboto-Regular.ttf'),
            'roboto-medium': require('./assets/fonts/Roboto-Medium.ttf'),
         },
        ]),
      ]);
    } catch (e) {
      // In this case, you might want to report the error to your error
      // reporting service, for example Sentry
      console.warn(
        'There was an error caching assets (see: App.js), perhaps due to a ' +
          'network timeout, so we skipped caching. Reload the app to try again.'
      );
      console.log(e);
    } finally {
      this.setState({ assetsAreLoaded: true });
    }
  }

    async db_init() {
        await DB.init();
    }

    async db_device_info_save() {
        await appService.device_info_save();
    }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  statusBarUnderlay: {
    height: 24,
    backgroundColor: 'rgba(0,0,0,0.2)',
  },
});

Answer 1

如果我没记错的话，您可以像在iOS中一样定义它，将@ x2，@ x4 ...添加到您的图标名称并为每个dpi定义一个。

更改不同DPI设备的加载图标大小

1 个答案: