React native 反应本机零食时出错

我不明白小吃上的错误信息。“未能安装模块。/assets/locales/sv.json…”

这是什么意思？这一行似乎失败了：

//导入所有区域设置
从“/assets/locales/en.json”导入en；
从“/assets/locales/sv.json”导入sv；
从“/assets/locales/he.json”导入he；
从“/assets/locales/ar.json”导入ar


从“React”导入React；
从“/i18n.js”导入{setLocale，strings，isoLangs}；
从“react native”导入{Image，Picker，StyleSheet，ListView，Text，TextInput，TouchableHighlight，View}；
从“反应导航”导入{StackNavigator}；//可以在package.json中指定版本
从“expo”导入{Constants}；
类主屏幕扩展了React.Component{
状态={
语言：“”，项值：[]，语言2:[]，选择器：[]，用户：“”，
用户名：“Ivanka”，
};
render（）{
返回(
{strings（'login.welcome'，{name:this.state.username}）}
{strings（'login.verified'）}
{strings（'login.signup_as'）}
this.props.navigation.navigate（'Details'）}>
this.props.navigation.navigate（'Details'）}>
{strings（'login.translator'）}
this.props.navigation.navigate（'Recruiter'）}>
this.props.navigation.navigate（'Recruiter'）}>
{strings（'login.recruiter'）}
{setLocale（'en'）；this.setState({
达姆：“笨蛋”
}); }}>
EN
setLocale（'sv'）}>
sv
);
}
}
类DetailsScreen扩展了React.Component{
建造师（道具）{
超级（道具）；
this.addLanguage=this.addLanguage.bind（this）
}
状态={
计数：0，项值：[]，语言：[]，语言2：[]，选择器：[]，用户：“”，
用户名：“Ivanka”，
某物：“ar”，
};
addLanguage（）{
让pickers=this.state.pickers；
让count=this.state.count；
计数++；
扒手，推(
{
id:1，
颜色：“蓝色”，
文本：“文本1”
}
);
让languages=this.state.languages；
语言。推送（“新”）；
这是我的国家({
伯爵：伯爵，
语言：语言，
});
设languages2=this.state.languages2；
语言2.push（'new'）；
这是我的国家({
伯爵：伯爵，
语言2：语言2，
});
}
update2（lang、ran、counter）{
设languages2=this.state.languages2；
语言2[计数器]=语言；
这是我的国家({
语言2：语言2，
});
}
更新（lang、ran、counter）{
让languages=this.state.languages；
语言[计数器]=lang；
这是我的国家({
语言：语言，
});
}
render（）{
设计数器=0；
返回(
{strings（'login.whichlanguages'）}{\n}
{this.state.pickers.map（（picker）=>{
计数器++；
log（“p”+picker.toString（））；
返回
this.update（lang，0，counter-1）}
>
{
Object.keys（isoLangs）.map（（lang）=>{
返回
})
}
this.update2（lang，0，counter-1）}
>
{
Object.keys（isoLangs）.map（（lang）=>{
返回
})
}
})}
this.addLanguage（）}>
{'\n'}+{strings（'login.addlanguage'）}{'\n'}{\n'}
this.props.navigation.navigate（'Screen3'）}>
);
}
}
常量地址=[
{
街道：“英语”，
城市：“悉尼”，
国家：“澳大利亚”
},{
街道：“爱沙尼亚”，
城市：“悉尼”，
国家：“澳大利亚”
},{
街道：“世界语”，
城市：“悉尼”，
国家：“澳大利亚”
}
];
const ds=new ListView.DataSource（{rowHasChanged:（r1，r2）=>r1！==r2}）；
类AutoComplete扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
搜索地址：[]
};
}
提交（）{
}
SearchedAddresses=（searchedText）=>{
让searchedAddresses=地址。过滤器（函数（地址）{
返回地址street.toLowerCase（）.indexOf（searchedText.toLowerCase（））>-1；
});
this.setState（{searchedAddresses:searchedAddresses}）；
};
RenderAddress=（地址）=>{
返回(
this.submit（）}>
import React from 'react';
import { setLocale, strings, isoLangs } from './i18n.js';
import {Image, Picker, StyleSheet, ListView, Text, TextInput, TouchableHighlight, View} from 'react-native';
import {StackNavigator} from 'react-navigation'; // Version can be specified in package.json
import {Constants} from 'expo';


class HomeScreen extends React.Component {

    state = {
        language : '',  itemValues: [],  languages2: [], pickers: [], user: '',
        username: 'Ivanka',
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.section1}>
                    <Text style={[styles.text, {paddingBottom: 20}]}>{strings('login.welcome', { name: this.state.username })}</Text>
                </View>
                <View style={styles.section2}>
                    <Text style={[styles.text, {paddingTop: 20}]}>{strings('login.verified')}</Text>
                </View>
                <View style={styles.section3}>
                    <Text style={styles.text}>{strings('login.signup_as')}</Text>
                </View>
                <View style={styles.section4}>
                    <View style={styles.buttonContainer}>

                        <View style={styles.button}>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>

                                <Image source={require('./assets/stck2.png')} style={styles.image}/>
                            </TouchableHighlight>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('Details')}>

                                <Text style={styles.buttonText}>{strings('login.translator')}</Text>
                            </TouchableHighlight>

                        </View>


                        <View style={styles.button}>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>

                                <Image source={require('./assets/stck1.png')} style={styles.image}/>
                            </TouchableHighlight>
                            <TouchableHighlight onPress={() => this.props.navigation.navigate('Recruiter')}>

                                <Text style={styles.buttonText}>{strings('login.recruiter')}</Text>
                            </TouchableHighlight>

                        </View>




                    </View>
                    <TouchableHighlight onPress={() =>{ setLocale('en');        this.setState({
                        dumme: 'dummy'
                    }); }}>

                        <Text style={styles.buttonText}>en</Text>
                    </TouchableHighlight>
                    <TouchableHighlight onPress={() => setLocale('sv')}>

                        <Text style={styles.buttonText}>sv</Text>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

class DetailsScreen extends React.Component {
    constructor(props) {
        super(props);
        this.addLanguage = this.addLanguage.bind(this)
    }

    state = {
        count: 0, itemValues: [], languages : [],languages2 : [], pickers: [], user: '',
        username: 'Ivanka',
        someVal: 'ar',

    };
    addLanguage() {
        let pickers = this.state.pickers;
        let count = this.state.count;
        count++;
        pickers.push(
            {
                id: 1,
                color: "blue",
                text: "text1"
            }
        );
        let languages = this.state.languages;
        languages.push('new');
        this.setState({
            count: count,
            languages: languages,
        });
        let languages2 = this.state.languages2;
        languages2.push('new');
        this.setState({
            count: count,
            languages2: languages2,
        });
    }
    update2(lang, ran, counter){
        let languages2 = this.state.languages2;
        languages2[counter]=lang;
        this.setState({
            languages2: languages2,
        });
    }
    update(lang, ran, counter){
        let languages = this.state.languages;
        languages[counter]=lang;
        this.setState({
            languages: languages,
        });
    }
    render() {
        let counter = 0;
        return (
            <View style={{flex: 1, justifyContent: 'center', backgroundColor: '#fff'}}>
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <Text style={{
                        fontSize: 20,
                        fontFamily: 'normal',
                        color: 'skyblue',
                    }}>
                        {strings('login.whichlanguages')} {'\n'}
                    </Text>
                </View>
                {this.state.pickers.map((picker) => {
                    counter++;
                    console.log("p"+picker.toString());
                    return <View key={Math.random()} style={{flexDirection: 'row', justifyContent: 'center'}}>
                        <Picker style={{width: 150}} selectedValue={this.state.languages[counter-1]}
                                onValueChange={(lang) => this.update(lang, 0, counter-1)}
                        >
                            {
                                Object.keys(isoLangs).map((lang) => {
                                    return <Picker.Item color="skyblue" key={Math.random()} label={isoLangs[lang].name} value={lang}/>
                                })
                            }
                        </Picker>
                        <Image
                        source={require('./assets/Arrow.png')}
                    />
                        <Picker style={{width: 150}} selectedValue={this.state.languages2[counter-1]}
                                onValueChange={(lang) => this.update2(lang, 0, counter-1)}

                        >
                            {
                                Object.keys(isoLangs).map((lang) => {
                                    return <Picker.Item color="skyblue" key={Math.random()} label={isoLangs[lang].name} value={lang}/>
                                })
                            }
                        </Picker>
                    </View>
                })}
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <TouchableHighlight onPress={() => this.addLanguage()}>
                    <Text style={{
                        fontSize: 25,
                        fontFamily: 'normal',
                        alignItems: 'center',
                        color: 'skyblue',
                    }}>{'\n'}+ {strings('login.addlanguage')}{'\n'}{'\n'}</Text>
                </TouchableHighlight>
                </View>
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                    <TouchableHighlight onPress={() => this.props.navigation.navigate('Screen3')}>
                        <Image
                            source={require('./assets/Next.png')}

                        />
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

const adresses = [
    {
        street: "English",
        city: "Sydney",
        country: "Australia"
    },{
        street: "Estonian",
        city: "Sydney",
        country: "Australia"
    },{
        street: "Esperanto",
        city: "Sydney",
        country: "Australia"
    }
];

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});

class AutoComplete extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            searchedAdresses: []
        };
    }
    submit() {

    }
    searchedAdresses = (searchedText) => {
        let searchedAdresses = adresses.filter(function(adress) {
            return adress.street.toLowerCase().indexOf(searchedText.toLowerCase()) > -1;
        });
        this.setState({searchedAdresses: searchedAdresses});
    };

    renderAdress = (adress) => {
        return (
            <TouchableHighlight onPress={() => this.submit()}>
                <View>
                    <Text>{adress.street}</Text>
                </View>
            </TouchableHighlight>
        );
    };
    render() {
        return (
            <View style={styles.row}>
                <View style={styles.container2}>
                    <TextInput
                        style={styles.textinput}
                        onChangeText={this.searchedAdresses}
                        placeholder="Type your language here" />
                    <ListView
                        dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
                        renderRow={this.renderAdress} />
                </View>
                <View style={styles.container2}>
                    <TextInput
                        style={styles.textinput}
                        onChangeText={this.searchedAdresses}
                        placeholder="Type your language here" />
                    <ListView
                        dataSource={ds.cloneWithRows(this.state.searchedAdresses)}
                        renderRow={this.renderAdress} />
                </View>
            </View>
        );
    }
}
const RootStack = StackNavigator(
    {
        Home: {
            screen: HomeScreen,
        },
        Details: {
            screen: DetailsScreen,
        },
        AutoComplete: {
            screen: AutoComplete,
        },
    },
    {
        initialRouteName: 'Home',
    }
);

export default class App extends React.Component {
    render() {
        return <RootStack/>;
    }
}
const styles = StyleSheet.create({
    row: {
        flex: 1,
        flexDirection: "row"
    },
    container2: {
        flex: 0.5,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    textinput: {
        marginTop: 30,
        backgroundColor: '#DDDDDD',
        height: 40,
        width: 150
    },
    container: {
        flex: 1,
        paddingTop: Constants.statusBarHeight,
        backgroundColor: '#fff',
    },
    section1: {
        flex: 0.17,
        justifyContent: 'flex-end',
        alignItems: 'center'
    },
    section2: {
        flex: 0.30,
        justifyContent: 'flex-start',
        alignItems: 'center'
    },
    section3: {
        flex: 0.10,
        justifyContent: 'center',
        alignItems: 'center'
    },
    section4: {
        flex: 0.43
    },
    text: {
        fontSize: 24,
        color: '#53a6db',
        textAlign: 'center',
        paddingTop: 40,
        paddingBottom: 40,
        paddingLeft: 40,
        paddingRight: 40
    },
    buttonContainer: {
        flex: 1,
        flexDirection: 'row'
    },
    button: {
        flex: 0.5,
        justifyContent: 'center',
        alignItems: 'center'
    },
    buttonText: {
        fontSize: 24,
        color: '#53a6db',
        textAlign: 'center',
        paddingTop: 5,
        paddingBottom: 5,
        paddingLeft: 5,
        paddingRight: 5
    },
    image: {
        width: 100,
        height: 100
    }
});