Question

我正在使用手机上的expo应用程序来构建一个简单的react native应用程序，但是我无法呈现简单的文本。我在做错什么吗？

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import bball from './assets/bball.jpeg'

export default class App extends Component {
  render() {
    let pic = {
      uri: bball
    }
    return (
      <View style={styles.container}>
        <Text>hello, world</Text>
        <Image source={{pic}} />
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 1

您尝试过这种方式吗？

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

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>hello, world</Text>
        <Image source={require('./assets/bball.jpeg')} />
      </View>
    )
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Answer 2

@Myers Nii-Ansah ，尝试导入图像

const image  = require('./my-icon.png');

Answer 3

只需在图像源中直接使用bbal。

<Image source={bbal} />

如果您有url个这样的图片用途。

<Image source={{uri: "https://example.com/image.png"}} />

因此，如果可以的话，您可以通过这种方式来获取组件状态中的图片网址。

render() {
    let pic = this.state.url ? { uri: this.state.url } : bbal
    return (
      <View style={styles.container}>
        <Text>hello, world</Text>
        <Image source={pic} />
      </View>
    )
  }

我的简单React Native项目无法渲染，有什么建议吗？

3 个答案: