Question

这个frameToPop错误是什么意思，为什么找不到我的图片？

我正在用expo构建一个React Native App，我想在登录屏幕上显示一张图像，该图像应该覆盖整个图像，但是由于某种原因它没有加载，并且出现了空白屏幕。

我的终端说“找不到图像文件：/// Users / masterolu / 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 in-node_modules / react-native / Libraries __invokeCallback中的/BatchedBridge/MessageQueue.js:414:4-...来自框架内部的另外4个堆栈框架”

该如何解决？

LoginScreen.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 { 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={require('../assets/Images/bg.jpg')}
          style={{ flex: 1, height: null, width: null }}
          resizeMode="cover"
        />
        </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 {
    // Render the app container component with the provider around it
      constructor(props) {
        super(props);
        this.state = {
          isReady: false
        };
      }

      async _loadAssetsAsync() {
        const imageAssets = cacheImages([
          ('./assets/Images/bg.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: {
      }
    });

{“ framesToPop”}背景图片未加载React Native

0 个答案: