我正在尝试在 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
},
我怎样才能从现在的设计变成我想要的设计?我特别努力让搜索栏与其他两个元素正确对齐。 感谢任何和所有的帮助。
使用
headerTitle
代替 header
:
headerTitle: () => <CustomHeader props={{}}></CustomHeader>
const CustomHeader = ({props}: {props: CustomHeaderProps}) => {
return (
<Text>Custom Header</Text>
)
}
export type CustomHeaderProps = {}