Android 无法从login.js解析图像路径
我对世博会完全陌生,反应很自然 我正在尝试使用ImageBackground 我将其用作下面的代码,但我从“app\components\Login.js”中得到此错误“无法解决”。/assets/back.jpg” 我的图像已在项目的“资产”文件夹中 当我尝试导入字体时,我也会遇到同样的错误 是否需要在使用前导入某些内容或其他内容? 我还尝试了不导入图像并将路径直接添加到源属性 Login.jsAndroid 无法从login.js解析图像路径,android,react-native,expo,Android,React Native,Expo,我对世博会完全陌生,反应很自然 我正在尝试使用ImageBackground 我将其用作下面的代码,但我从“app\components\Login.js”中得到此错误“无法解决”。/assets/back.jpg” 我的图像已在项目的“资产”文件夹中 当我尝试导入字体时,我也会遇到同样的错误 是否需要在使用前导入某些内容或其他内容? 我还尝试了不导入图像并将路径直接添加到源属性 Login.js import React, { Component } from 'react'; import
import React, { Component } from 'react';
import back from './assets/back.jpg';
import {
StyleSheet,
Text,
View,
TextInput,
KeyboardAvoidingView,
TouchableOpacity,
AsyncStorage,
Image,
ImageBackground,
} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
export default class Login extends React.Component {
static navigationOptions = {
header: null,
};
constructor(props) {
super(props);
this.state = {
username:'',
password:'',
}
}
componentDidMount(){
this._loadInitialState().done();
}
_loadInitialState = async () =>{
var value = await AsyncStorage.getItem('user');
if (value !=null){
this.prop.navigation.navigate('Profile');
}
}
render() {
return (
<ImageBackground source={back} style={styles.backImg}>
<KeyboardAvoidingView behavior='padding' style={styles.wrapper}>
<View style={styles.container}>
<Image
style={styles.logo}
source={require('/MyFirst/assets/logo.png')}
/>
<TextInput
style={styles.textInput} placeholder='Username'
onChangeText={(username) =>this.setState({username}) }
underlineColorAndroid = 'transparent'
/>
<TextInput
style={styles.textInput} placeholder='Password'
onChangeText={(password) =>this.setState({password}) }
underlineColorAndroid = 'transparent'
/>
<TouchableOpacity style={styles.btn}
onPress={this.login}>
<Text style={styles.btnText}>Login</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ImageBackground>
);
}
}
const styles = StyleSheet.create({
wrapper:{
flex:1,
},
container:{
flex:1,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#e5ffd3',
paddingLeft:40,
paddingRight:40,
},
logo:{
width: 250,
height: 250,
},
textInput:{
alignSelf:'stretch',
padding:16,
marginBottom:20,
backgroundColor:'#fff',
borderWidth: 1,
borderColor: '#d6d7da',
borderRadius: 25,
},
btn:{
alignSelf:'stretch',
backgroundColor:'#589e25',
padding:20,
alignItems: 'center',
borderRadius: 25,
},
btnText:{
color: '#ffffff',
},
})
您应该以这种方式使用
ImageBackground
。它会解决你的问题
<ImageBackground source={require('../../assets/back.jpg')} style={styles.backImg}>
可以在这里找到工作示例从“/assets/back.jpg”中删除
导入回代码>这行。并检查导入路径。在styles.backImg中添加flex:1
(如果未添加)。您可以清理缓存并重试吗?清理了我的缓存并出现了相同的错误,我是否必须将我的图像链接到npm链接或expo链接?进入此链接以获取工作示例。我认为你的图像路径是错误的,我正在更新我的答案。检查它最终起作用了,因为您猜问题在于处理图像,非常感谢
<ImageBackground source={require('../../assets/back.jpg')} style={styles.backImg}>