如何在React Native的标题中放置搜索栏？

Question

我正在尝试在React Native中为我的应用创建此标头 。 屏幕标题，返回上一屏幕的按钮以及位于其下方的搜索栏占据了整个屏幕的宽度。 所有这三个元素应为标头的一部分。

这就是我的开始。 如您所见，搜索栏位于标题外部，并且可以滚动（不应滚动）。

在尝试了几种不同的技术之后，我离预期的设计还很遥远。 这就是我到目前为止所拥有的:(

以下代码是我最近的尝试：

标头代码：

static navigationOptions = ({ navigation }) => ({
        // headerLeft: <CloseModalButton navigation={navigation} testID='new-message-view-close' />,
        headerStyle: { backgroundColor: '#F9F9F9' },
        header: (
            <View>
                <Text fontSize={17}>{I18n.t('New_Message')}</Text>
                <SearchBox onChangeText={text => this.onSearchChangeText(text)} testID='new-message-view-search' />
            </View>
        ),
        title: I18n.t('New_Message')
    })

searchBox组件的样式：

searchBox: {
        alignItems: 'center',
        backgroundColor: '#E6E8E9',
        borderRadius: 10,
        color: '#8E8E93',
        flexDirection: 'row',
        fontSize: 17,
        height: 43,
        margin: 8,
        marginVertical: 10,
        paddingHorizontal: 10
    },

如何从现有的设计过渡到预期的设计？ 我特别想让搜索栏与其他2个元素正确对齐。 任何和所有帮助表示赞赏。

Answer 1

为这个想法放一个世博会小吃。 世博小吃链接