我的簡單反應本機項目不會呈現，有什么建議嗎？

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"}} />

所以你可以這樣做，如果有的話，你可以從你的組件狀態中獲得圖像 url。

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