如何在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

為這個想法放一個世博會小吃。 世博小吃鏈接