Question

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

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

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

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

标头代码：

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

为该创意投放博览会零食。 Expo snack link

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

1 个答案: