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

【问题标题】：How to place Search Bar inside header in React Native?如何在 React Native 的标题中放置搜索栏？
【发布时间】：2019-06-29 20:42:22
【问题描述】：

我正在尝试在 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
    },

我怎样才能从我现在拥有的东西变成我想要的设计？我特别难以让搜索栏与其他两个元素正确对齐。感谢您提供任何和所有帮助。

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

使用 headerTitle 而不是标题作为：

headerTitle: () => ...你的代码，

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。