Question

我正在用expo构建一个React Native App，我想在登录屏幕上显示一个图像，该图像应该覆盖整个图像，但是由于某种原因它没有加载，并且屏幕空白。我的终端说“找不到图像文件：/// Users / BlahBlah / Library / Developer / CoreSimulator / Devices / 3FE078A1-2C0A-4308-B256-BFBF1B246A85 / data / Containers / Bundle / Application / 08978CAA-74FC-476D-939C -9CBDF1E4B9D9 / Exponent-2.13.0.app /./ assets / Images / TemplatePic.jpg -node_modules / react-native / Libraries / BatchedBridge / NativeModules.js：104：55在 -__invokeCallback中的node_modules / react-native / Libraries / BatchedBridge / MessageQueue.js：414：4 -...还有来自框架内部的4个堆栈框架”

登录屏幕

import React from 'react';
import { View, Image, Dimensions, SafeAreaView, StyleSheet, Text } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import { Tab, Tabs, Header } from 'native-base';
import { commonStyles } from './styles/styles';
import SignInScreen from './SignInScreen';
import SignUp from './SignUp';

const { width, height } = Dimensions.get('window');
class LoginScreen extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }

render() {
  return (
      <View style={styles.background}>
        <View style={StyleSheet.absoluteFill}>
        <Image
          source={('../assets/Image/TemplatePic.jpg')}
          style={{ flex: 1, height: null, width: null }}
        />
        </View>
      </View>
  );
}
}

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

export default LoginScreen;

App.js

import React from 'react';
import { View, Image, Dimensions, SafeAreaView, StyleSheet, Text } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as firebase from 'firebase';
import { firebaseConfig } from './config.js';
import { Provider, connect } from 'react-redux';
import RootStack from './RootStack';
import LoginScreen from './App/screens/LoginScreen';
import configureStore from './App/reducers/configureStore';

firebase.initializeApp(firebaseConfig);
// create store from redux
const store = configureStore();

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    }
      return Asset.fromModule(image).downloadAsync();
  });
}
const { width, height } = Dimensions.get('window');

export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          isReady: false
        };
      }

      async _loadAssetsAsync() {
        const imageAssets = cacheImages([
          ('./assets/Images/TemplatePic.jpg'),
        ]);

        await Promise.all([...imageAssets]);
      }

    render() {
      //If the state is not ready then display the apploading oterwise display the app
      if (!this.state.isReady) {
          return (
            <AppLoading
              startAsync={this._loadAssetsAsync}
              onFinish={() => this.setState({ isReady: true })}
              onError={console.warn}
            />
          );
        }
      return (
        <View style={styles.background}>
          <LoginScreen />
        </View>
      );
    }
    }

    const styles = StyleSheet.create({
      background: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 16
      },
      textStyle: {
      }
    });

Answer 1

尝试一下：

<Image
  source={require('../assets/Image/TemplatePic.jpg')}
  style={{ flex: 1 }}
  resizeMode="cover"
/>

React Native Expo：为什么无法/无法找到我的图像并且无法加载？

1 个答案: