Question

我创建了一个视图，用户可以在其中插入城市，标题，描述的详细信息，并使用带有http post的json将其提交给我的gae python后端。

但风格看起来不太好。我对CSS不是很了解。我希望它看起来更漂亮＆＃34;或更多对齐。对不起，如果我是模糊的，但如果你看一下表格，它几乎没有风格。

首先，我想在这里输入您的文字＆＃34;更像是一个文本框，更多的是右边。我怎样才能做到这一点？

我的观点代码：

import React, {Component} from 'react';
import {Alert, AsyncStorage, Dimensions, Picker, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native';
import {Button, Input} from 'react-native-elements'

import Icon from 'react-native-vector-icons/FontAwesome';

const SCREEN_WIDTH = Dimensions.get('window').width;

class Buttons extends Component {

    constructor(props) {
        super(props);


        if (AsyncStorage.getItem('name')) {
            name = AsyncStorage.getItem('name');
        }


        if (AsyncStorage.getItem('auth_id')) {
            auth_id = AsyncStorage.getItem('auth_id');
        }


        this.state = {
            name: name,
            auth_id: auth_id,
            country: '',
            category: '',
            region: '',
            city: '',
            title: 'lorem',
            text: 'ipsum',
            options: {
                "4699201": "Kumbakonam",
                "4699202": "Madurai",
                "4700196": "Chengalpattu",
                "4700197": "Coonoor",
                "4693193": "Tiruchirappalli",
                "4700198": "Kanchipuram",
                "4700199": "Pudukkottai",
                "4703196": "Thoothukkudi",
                "4701199": "Karur",
                "4691203": "Avadi",
                "4691202": "Ambattur",
                "4697199": "Thanjavur",
                "4697198": "Chennai",
                "4691205": "Other city",
                "4696196": "Salem",
                "4691204": "Vellore",
                "4701198": "Erode",
                "4701200": "Tiruvannamalai",
                "4694193": "Arakonam",
                "4692202": "Hosur",
                "4692203": "Pollachi",
                "4702196": "Dindigul",
                "4702197": "Tambaram",
                "4695201": "Cuddalore",
                "4695202": "Tiruppur",
                "4704192": "Coimbatore",
                "4702198": "Tirunelveli",
                "4676202": "Namakkal",
                "4676201": "Nagercoil"
            }
        };
    }

    selectCountry(val) {
        this.setState({country: val});
    }

    setTitle(val) {
        this.setState({title: val});
    }

    setCategory(val) {
        this.setState({category: val});
    }

    setCity(val) {
        this.setState({city: val});
    }

    setText(val) {
        this.setState({text: val});
    }

    selectRegion(val) {
        this.setState({region: val});
        fetch('https://www.koolbusiness.com/cities/insert/api', {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                "region_id": val,
            }),
        }).then((response) => response.json())
            .then((responseJson) => {
                this.setCities(responseJson);
            })
            .catch((error) => {
                console.error(error);
            });
    }

    setCities = (value) => {
        this.setState({'options': value});
    };
    setName = (value) => {
        this.setState({'name': value});
    };
    onPressLearnMore = () => {
        AsyncStorage.getItem("auth_id").then((value) => {

            fetch('https://www.koolbusiness.com/api/add', {
                method: 'POST',
                headers: {
                    Accept: 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    "auth_id": value,
                    "title": this.state.title,
                    "text": this.state.text,
                    "city": this.state.city,
                    "category": this.state.category,
                }),
            }).then((response) => response.json())
                .then((responseJson) => {
                    //  this.setCities(responseJson);
                })
                .catch((error) => {
                    console.error(error);
                });


            Alert.alert(
                'Thank you ' + this.state.name,
                'Your ad was posted',
                [

                    {text: 'OK', onPress: () => console.log('OK Pressed')},
                    {text: 'Logout', onPress: () => AsyncStorage.clear()},
                ],
                {cancelable: false}
            );

        });


    };

    componentDidMount() {

        AsyncStorage.getItem("name").then((value) => {

            this.state.name = value;

        });

        fetch('https://www.koolbusiness.com/cities/insert/api', {
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                "region_id": "4701188",
                "password": this.state.password,
            }),
        }).then((response) => response.json())
            .then((responseJson) => {
                this.setCities(responseJson);
            })
            .catch((error) => {
                console.error(error);
            });
    }

    render() {
        return (
            <ScrollView style={styles.container}>
                <View style={styles.contentView}>
                    <View style={styles.headerContainer}>
                        <Icon color="white" name="rocket" size={62}/>
                        <Text style={styles.heading}>Create your ad</Text>
                    </View>

                    <Text>Pick a Category</Text>
                    <Picker selectedValue={this.state.category}
                            onValueChange={(itemValue, itemIndex) => this.setCategory(itemValue)}
                    >


                        <Picker.Item label="Houses" value="1020"/>
                        <Picker.Item label="Apartments" value="1010"/>
                        <Picker.Item label="Vacation homes" value="1030"/>
                        <Picker.Item label="Offices" value="1050"/>
                        <Picker.Item label="Land" value="1080"/>
                        <Picker.Item label="Flatmates/Paying Guest" value="1100"/>


                        <Picker.Item label="Cars" value="2010"/>
                        <Picker.Item label="Motorcycles" value="2030"/>
                        <Picker.Item label="Accessories &amp; parts" value="2040"/>
                        <Picker.Item label="Trucks" value="2080"/>
                        <Picker.Item label="Other vehicles" value="2070"/>
                        <Picker.Item label="Home &amp; Personal items" value="js"/>
                        <Picker.Item label="Home &amp; Garden" value="3040"/>
                        <Picker.Item label="Clothing" value="3050"/>
                        <Picker.Item label="For Kids (Toys &amp; Clothes)" value="3030"/>
                        <Picker.Item label="Jewelry &amp; Watches" value="3060"/>
                        <Picker.Item label="Leisure, Sports &amp; hobby" value="js"/>
                        <Picker.Item label="Hobbies" value="4010"/>
                        <Picker.Item label="Sports &amp; Bicycles" value="4020"/>
                        <Picker.Item label="Movies, Books &amp; Magazines" value="4040"/>
                        <Picker.Item label="Pets" value="4030"/>
                        <Picker.Item label="Tickets" value="4090"/>
                        <Picker.Item label="Art &amp; Collectibles" value="4060"/>
                        <Picker.Item label="Music &amp; Instruments" value="4070"/>

                        <Picker.Item label="Computers &amp; Accessories" value="5030"/>
                        <Picker.Item label="TV, Audio, Video, Cameras" value="5020"/>
                        <Picker.Item label="Cellphones &amp; gadgets" value="5010"/>
                        <Picker.Item label="Video games &amp; consoles" value="5040"/>
                        <Picker.Item label="Jobs &amp; Services" value="js"/>
                        <Picker.Item label="Job offers" value="6010"/>
                        <Picker.Item label="Resumes" value="6020"/>
                        <Picker.Item label="Services" value="6030"/>
                        <Picker.Item label="Classes" value="6040"/>
                        <Picker.Item label="Professional/Office equipment" value="6090"/>

                        <Picker.Item label="Other" value="7010"/>
                    </Picker>
                    <Text>Pick a Region</Text>

                    <Picker selectedValue={this.state.region}
                            onValueChange={(itemValue, itemIndex) => this.selectRegion(itemValue)}
                    >

                        <Picker.Item label="Andaman &amp; Nicobar Islands" value="4703187"/>
                        <Picker.Item label="Andhra Pradesh" value="4694186"/>
                        <Picker.Item label="Arunachal Pradesh" value="4699188"/>
                        <Picker.Item label="Assam" value="4692186"/>
                        <Picker.Item label="Bihar" value="4702186"/>
                        <Picker.Item label="Chandigarh" value="4698185"/>
                        <Picker.Item label="Chhattisgarh" value="4676188"/>
                        <Picker.Item label="Dadra &amp; Nagar Haveli" value="4691190"/>
                        <Picker.Item label="Daman &amp; Diu" value="4704183"/>
                        <Picker.Item label="Delhi" value="4699183"/>
                        <Picker.Item label="Goa" value="4702187"/>
                        <Picker.Item label="Gujarat" value="4691189"/>
                        <Picker.Item label="Haryana" value="4700186"/>
                        <Picker.Item label="Himachal Pradesh" value="4703185"/>
                        <Picker.Item label="Jammu &amp; Kashmir" value="4694187"/>
                        <Picker.Item label="Jharkhand" value="4699189"/>
                        <Picker.Item label="Karnataka" value="4701185"/>
                        <Picker.Item label="Kerala" value="4695189"/>
                        <Picker.Item label="Lakshadweep" value="4700189"/>
                        <Picker.Item label="Madhya Pradesh" value="4697186"/>
                        <Picker.Item label="Maharashtra" value="4694184"/>
                        <Picker.Item label="Manipur" value="4700187"/>
                        <Picker.Item label="Meghalaya" value="4703186"/>
                        <Picker.Item label="Mizoram" value="4698184"/>
                        <Picker.Item label="Nagaland" value="4692187"/>
                        <Picker.Item label="Orissa" value="4696185"/>
                        <Picker.Item label="Pondicherry" value="4676189"/>
                        <Picker.Item label="Punjab" value="4693185"/>
                        <Picker.Item label="Rajasthan" value="4701186"/>
                        <Picker.Item label="Sikkim" value="4701187"/>


                        <Picker.Item label="Tamil Nadu" value="4701188"/>

                        <Picker.Item label="Telangana" value="4984687332163584"/>
                        <Picker.Item label="Tripura" value="4697187"/>
                        <Picker.Item label="Uttaranchal" value="4699190"/>
                        <Picker.Item label="Uttar Pradesh" value="4692188"/>
                        <Picker.Item label="West Bengal" value="4700188"/>
                    </Picker>
                    <Text>Pick a City</Text>

                    <Picker selectedValue={this.state.city}
                            onValueChange={(itemValue, itemIndex) => this.setCity(itemValue)}
                    >
                        {Object.keys(this.state.options).map((key) => {
                            return (<Picker.Item label={this.state.options[key]} value={key} key={key}/>) //if you have a bunch of keys value pair
                        })}
                    </Picker>

                    <Input icon={
                        <Icon
                            name='envelope-o'
                            color='rgba(0, 0, 0, 0.38)'
                            size={25}
                            style={{backgroundColor: 'transparent'}}
                        />
                    }

                           keyboardAppearance='light'
                           autoFocus={false}
                           autoCapitalize='none'
                           autoCorrect={false}
                           keyboardType='email-address'
                           returnKeyType='next'
                           inputStyle={{marginLeft: 10}}

                           containerStyle={{borderBottomColor: 'rgba(0, 0, 0, 0.38)'}} placeholder="Subject" onChangeText={(title) => this.setTitle({title})}/>
                    <TextInput
                        style={{height: 40}}

                        placeholder="Type your text here!"
                        onChangeText={(text) => this.setText({text})}
                    />
                    <Button
                        onPress={this.onPressLearnMore}

                        title="SUBMIT"
                        disabled={false}
                        titleStyle={{fontWeight: '700'}}
                        buttonStyle={{
                            backgroundColor: 'rgba(92, 99,216, 1)',
                            width: 300,
                            height: 45,
                            borderColor: 'transparent',
                            borderWidth: 0,
                            borderRadius: 5
                        }}
                        containerStyle={{marginTop: 20}}
                    />

                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white'
    },
    contentView: {
        flex: 1
    },
    headerContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        padding: 40,
        backgroundColor: '#4F80E1',
        marginBottom: 20
    },
    heading: {
        color: 'white',
        marginTop: 10,
        fontSize: 22,
        fontWeight: 'bold'
    },
});

export default Buttons;

风格＆＃34;创造＆＃34;视图

0 个答案: