Question

我不能为我的生活弄清楚如何将我的汽车列表映射到选择器项目。我需要它，以便当用户选择年份时，只有当年的汽车制造商出现，然后当用户从那年的那个品牌中选择一个仅制造模型时，然后与引擎相同。 这是我的一些JSON文件： `

{
    "years": [
        {
            "None": {
                "None": {
                    "None": [
                        "None"
                    ]
                }
            }
        },
        {
            "2018": {
                "Acura": {
                    "ILX": [
                        "2.4L"
                    ],
                    "MDX": [
                        "3.5L"
                    ],
                    "MDX SH-AWD": [
                        "3.5L"
                    ],
                    "MDX Sport Hybrid": [
                        "3.0L"
                    ],
                    "RDX": [
                        "3.5L"
                    ],
                    "RLX": [
                        "3.5L"
                    ],
                    "RLX Sport Hybrid SH-AWD": [
                        "3.5L"
                    ],
                    "TLX": [
                        "2.4L",
                        "3.5L"
                    ],
                    "TLX SH-AWD": [
                        "3.5L"
                    ]
                },
                "Alfa Romeo": {
                    "4C": [
                        "1.7L"
                    ],
                    "4C Spider": [
                        "1.7L"
                    ],
                    "Giulia": [
                        "2.0L"
                    ],
                    "Giulia Quadrifoglio": [
                        "2.9L"
                    ],
                    "Giulia TI": [
                        "2.0L"
                    ],
                    "Stelvio": [
                        "2.0L"
                    ],
                    "Stelvio Quadrifoglio": [
                        "2.9L"
                    ],
                    "Stelvio TI": [
                        "2.0L"
                    ]
                }
            }
        }
    ]
}

` 以下是我目前的一些反应原生代码：

import React from 'react';
import { View, ScrollView, Text, TextInput, TouchableOpacity, KeyboardAvoidingView, StyleSheet, AsyncStorage, Picker } from 'react-native';

import { Foot } from '../../../components/Foot';
import carList from '../../../resources/test.json';

export default class AddCar extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        title: typeof (navigation.state.params) === 'undefined' || typeof (navigation.state.params.title) === 'undefined' ? '' : navigation.state.params.title,
        headerRight: <View></View>
    });
    constructor(props) {
        super(props);
        this.state = {
            hasLoaded: false,

            name: '',

            cars: [],

            Year: 'None',
            Make: 'None',
            Model: 'None',
            Engine: 'None',
        }
    }

    componentDidMount() {
        this._loadInitialState().done();
    }

    _loadInitialState = async () => {

        var user = await AsyncStorage.getItem('user');
        if (user !== null) {
            const UserInfo = JSON.parse(user);

            this.setState({ name: UserInfo['name'] });

            this.props.navigation.setParams({ title: this.state.name });
        }

        this._getCarList().done();

    }

    _getCarList = async () => {
        this.setState({ cars: carList });
        console.log(this.state.cars);
        this.setState({ hasLoaded: true });

    }

    render() {
        return (
            <KeyboardAvoidingView behavior='padding' style={styles.container}>

                <ScrollView>

                    <View style={styles.content}>

                        <View style={styles.selector}>
                            <Text style={styles.label}>Year:</Text>
                            <View style={styles.dropContainer}>
                                {this.state.hasLoaded &&
                                    <Picker
                                        style={styles.dropdown}
                                        selectedValue={this.state.Year}
                                        onValueChange={(itemValue, itemIndex) => this.setState({ Year: itemValue })} >
                                        {this.state.cars.map((item, value) => {
                                            console.log(item + " " + value);
                                            return (<Picker.Item label={item} value={value} key={value} />)
                                        })}
                                    </Picker>
                                }
                            </View>
                        </View>

                        <View style={styles.selector}>
                            <Text style={styles.label}>Make:</Text>
                            <View style={styles.dropContainer}>
                                <Picker style={styles.dropdown}
                                    selectedValue={this.state.Make}
                                    onValueChange={(itemValue) => this.setState({ Make: itemValue })} >

                                </Picker>
                            </View>
                        </View>

                        <View style={styles.selector}>
                            <Text style={styles.label}>Model:</Text>
                            <View style={styles.dropContainer}>
                                <Picker style={styles.dropdown}
                                    selectedValue={this.state.Model}
                                    onValueChange={(itemValue) => this.setState({ Model: itemValue })} >

                                </Picker>
                            </View>
                        </View>

                        <View style={styles.selector}>
                            <Text style={styles.label}>Engine:</Text>
                            <View style={styles.dropContainer}>
                                <Picker style={styles.dropdown}
                                    selectedValue={this.state.Model}
                                    onValueChange={(itemValue) => this.setState({ Model: itemValue })} >
                                    <Picker.Item label="None" value="None" />
                                </Picker>
                            </View>
                        </View>

                    </View>

                </ScrollView>

                <Foot />
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        flex: 1,
        backgroundColor: '#FFF',
    },
    content: {
        flex: 1,
        width: '100%',
        position: 'relative',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFF',
        marginTop: '18%',
    },
    selector: {
        width: '65%',
        flexDirection: 'row',
        marginTop: 5,
        padding: 3,
    },
    label: {
        flex: .35,
        fontSize: 16,
        alignSelf: 'flex-start',
        textAlign: 'left',
        top: 15,
    },
    dropContainer: {
        flex: .65,
        width: 20,
        borderColor: '#F0F0F0',
        borderWidth: 1,
        borderRadius: 2,
        elevation: 3,
        backgroundColor: '#FEFEFE',
    }
});

Answer 1

如果将json存储在名为cars的对象中，则可以使用

获得所有年份

var flattenedCars = cars["years"].reduce((current, next) => { return Object.assign(current, next);})
var years = Object.keys(flattenedCars);

此时您还可以找到所需的年份

cars['years'].find((car) => car[2018] != null);

其中2018应该是变量。

这应该引导你完成剩下的工作。

将数据从json文件显示为react-native选取器项

1 个答案: