时间戳

首页 > 解决方案 > ReactNative 中视图内的平行视图

react-native - ReactNative 中视图内的平行视图

问题描述

我正在尝试生成一个组件，其中一个视图内有一个搜索栏，另一个视图内有几个按钮。像这样的东西：

预期的

我开发了这段代码，但我无法执行此并行视图。

import React from "react";
import { StyleSheet, View, FlatList, Image, Text, Item } from "react-native";
import { colorUtil } from "../../constants/Colours";
import { SearchBar, Button } from 'react-native-elements';

export default class App extends React.Component {
    state = {
        search: '',
    };

    updateSearch = search => {
        this.setState({ search });
    };

    render() {
        const { search } = this.state;

        const styles = StyleSheet.create({
            searchBarContainer: {
                borderBottomWidth: 1,
                borderBottomColor: '#e2e2e2',
                height: 64,
                backgroundColor: '#FFFFFF'

            },
            searchBarField: {
                position: 'relative',
                margin: 0,
                width: '48%',
                //padding: 44,
                //fontSize: 14,
                borderRadius: 80,
                backgroundColor: '#E5E7E8'
            },
            btnField: {
                borderBottomWidth: 1,
                borderBottomColor: '#e2e2e2',
                height: 64,
                backgroundColor: '#FFFFFF'

            }
        });

        return (
            <View style={styles.searchBarContainer}>
                <View style={styles.searchBarField}>
                    <SearchBar
                        lightTheme
                        onChangeText={this.updateSearch}
                        onClearText={this.updateSearch}
                        value={search}
                        icon={{ type: 'font-awesome', name: 'search' }}
                        placeholder='Find' />
                </View>
                <View style={styles.btnField}>
                    <Button
                        title="Solid Button"
                    />
                </View>
            </View>
        );
    }
}

但结果不等于。我怎样才能使这些领域平行？

标签： react-native

解决方案

您必须将父视图的 flex 方向设置为 row 以将所有内容放在同一行中。此外，删除 height 属性将正确对齐内容。

     searchBarContainer: {
        borderBottomWidth: 1,
        borderBottomColor: '#e2e2e2',
        height: 64,
        backgroundColor: '#FFFFFF',
        flexDirection: 'row',
        alignItems: 'center',
      },
      btnField: {
         borderBottomWidth: 1,
         borderBottomColor: '#e2e2e2',
         backgroundColor: '#FFFFFF',
      },

推荐阅读