Question

这段确切的代码在代码示例中的React Native Web Player上运行良好：https://facebook.github.io/react-native/docs/props.html

但是在运行“react-native run-android”之后，应用程序会在我的手机上加载所有文本而不是图像。图像应该是一个很大的差距而不是图像！图像在Web Player上渲染得很好，所以我想知道这是否是应用程序打包的问题？

App.js中的代码

    /**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  Image,
  View,
  AppRegistry
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component {
  render() {

    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    }

    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Image source={pic} style={styles.image} />
        <Text style={styles.instructions}>
          {instructions}
        </Text>

      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => App);


const styles = StyleSheet.create({
  image: {
    flex: 1,
    height: null,
    width: null,
    resizeMode: 'cover'
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Answer 1

因为您已经在做

justifyContent: 'center',
    alignItems: 'center',

在父容器样式中，您限制了图片的尺寸。

将其删除，或将宽度提供给图像

const {width, height} = Dimensions.get('window')

image: {
        flex: 1,
        width,
        resizeMode: 'cover'
    }

图像无法渲染但适用于React Native Web Player

1 个答案: