我刚开始使用React Native,我正在使用RN开发一个应用程序...我被困在这里了...我在应用程序的一个组件中有一个表单,它有两个并排排列的文本输入,如下图所示

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 本土,所以你可以认为我是一个NOOB…提前感谢你的帮助.期待你的回答.

推荐答案

在风格上使用"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>
    );
}

React-native相关问答推荐

如何重复使用expo 音频对象S录音?

如何在Recact Native中单击Back按钮后调用函数

打开屏幕后自动显示键盘

将屏幕标题更新为所选标签导航的标题

是否有用于react-native 的简单同步存储选项?

React Native - 动画宽度缩小

在 React Native 中从 Modal 打开 Modal

React Native WebView onMessage 没有做任何事情

请求无法完成,因为您已超出配额

redux-saga:如何以编程方式为yields 创建多个calls/side-effects?

如何实时从 react-native-camera 获取帧

无法访问函数内部的状态

试图注册两个具有相同名称 ProgressBarAndroid 的视图

null 不是对象(判断 this.state.count)

将 react-native 元素Bundle 为 iOS 框架或 (.aar) Android 库

如何在不使用 JSX 的情况下在 React Native 中制作组件?

React Native 元素,未生成 index.ios.js 或 index.android.js

expo 已过期卸载并再次运行以升级

在不使用 3rd 方库的情况下,在react-native中显示主屏幕之前显示启动画面

React Native,更改 React Navigation 标题样式