Параллельное представление внутри представления в ReactNative

Question

Я пытаюсь создать компонент с панелью поиска внутри представления и парой кнопок внутри другого представления. Примерно так:

Ожидается

Я разрабатываю этот фрагмент кода, но не могу сделать это параллельное представление.

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>
        );
    }
}

Но результат не равен. Как сделать эти поля параллельными?

Answer 1

Вы должны установить направление изгиба родительского представления для строки, чтобы разместить все в одной строке. Также удаление свойства высоты приведет к правильному выравниванию содержимого.

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