[英]React Native Expo: Why isn't/can't my image can't be found and isn't loading?
I'm building a React Native App with expo and I have an image I want to display on my login screen that should cover the whole image but for some reason it's not loading and I have a blank screen.我正在使用 expo 构建一个 React Native 应用程序,并且我想在我的登录屏幕上显示一个应该覆盖整个图像但由于某种原因它没有加载并且我有一个空白屏幕的图像。 My terminal says "Could not find image file:///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 in - node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:414:4 in __invokeCallback -... 4 more stack frames from framework internals"
我的终端说“找不到图像文件://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 in - node_modules/react-native/Libraries/BatchedBridge/ __invokeCallback 中的 MessageQueue.js:414:4 -... 来自框架内部的另外 4 个堆栈帧”
LoginScreen登录界面
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应用程序.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: {
}
});
Try this:尝试这个:
<Image
source={require('../assets/Image/TemplatePic.jpg')}
style={{ flex: 1 }}
resizeMode="cover"
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.