react-native – React Native：并排对齐两个TextInput

发布时间：2020-12-15 20:16:47 所属栏目：百科来源：网络整理

导读：我刚开始使用React Native,我正在使用RN开发一个应用程序……我有点卡在这里…我在应用程序的一个组件中有一个表单,其中有几个TextInputs并排排列,就像在图像中一样下面这是我试图实现上述设计的代码. import React,{Component} from 'react';import {View,

我刚开始使用React Native,我正在使用RN开发一个应用程序……我有点卡在这里…我在应用程序的一个组件中有一个表单,其中有几个TextInputs并排排列,就像在图像中一样下面

enter image description here

这是我试图实现上述设计的代码.

import React,{Component} from 'react';
import {View,Text,StyleSheet,TextInput,TouchableHighlight} from 'react-native';


export default class AddItems extends Component {
    onAdd() {
        alert('Hello');
    }

    render() {
    return (
        <View style={addItemStyles.wrapper}>
            <View>
                <Text>Item to give cash credit for:</Text>
                <View>
                    <View>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
                    </View>
                    <View>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
                    </View>
                </View>
            </View>

        </View>
    );
}
}

const addItemStyles = StyleSheet.create({
    wrapper: {
        padding: 10,backgroundColor: '#FFFFFF'
    },inputLabels: {
        fontSize: 16,color: '#000000',marginBottom: 7,},inputField: {
        backgroundColor: '#EEEEEE',padding: 10,color: '#505050',height: 50
    },inputWrapper: {
        paddingBottom: 20,saveBtn: {
        backgroundColor: '#003E7D',alignItems: 'center',padding: 12,saveBtnText: {
        color: '#FFFFFF',fontSize: 18,}


});

但相反,我得到了这样的观点.

enter image description here

我知道这可能是一个小问题,但正如我上面所说,我刚开始使用React Native,所以你可以认为我是一个菜鸟……提前感谢你的帮助.期待您的回答.

解决方法

在风格中使用“flexDirection”

render() {
    return (
        <View style={addItemStyles.wrapper}>
            <View>
                <Text>Item to give cash credit for:</Text>
                <View style={{flexDirection:"row"}}>
                    <View style={{flex:1}}>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-start',}} />
                    </View>
                    <View style={{flex:1}}>
                        <TextInput placeholder="Test" style={{justifyContent: 'flex-end',}} />
                    </View>
                </View>
            </View>

        </View>
    );
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!