Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/android/214.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/react-native/7.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Android 无法从login.js解析图像路径_Android_React Native_Expo - Fatal编程技术网

Android 无法从login.js解析图像路径

Android 无法从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

我对世博会完全陌生,反应很自然 我正在尝试使用ImageBackground 我将其用作下面的代码,但我从“app\components\Login.js”中得到此错误“无法解决”。/assets/back.jpg” 我的图像已在项目的“资产”文件夹中 当我尝试导入字体时,我也会遇到同样的错误 是否需要在使用前导入某些内容或其他内容? 我还尝试了不导入图像并将路径直接添加到源属性

Login.js

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