navigation.setOptions不改变
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了navigation.setOptions不改变相关的知识,希望对你有一定的参考价值。
我在用react-navigator创建屏幕,但当屏幕打开时,我不能改变标题栏的选项。
我的代码(App.js)。
function App() {
return (
<NavigationContainer>
<Stack.Navigator screenOptions={{
headerTitleAlign: 'center',
headerTitle: props => <LogoTitle {...props} />,
headerRight: props => <HeaderRight {...props} />,
headerStyle: {
backgroundColor: '#F46A0D'
},
headerTintColor: '#fff',
}}>
<Stack.Screen name="Search" component={SearchScreen}/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
我的SearchScreen. js:
import React from 'react'
import { Text, View } from 'react-native'
import { Button } from 'react-native-paper'
const SearchScreen = ({ navigation }) => {
navigation.setOptions = {
headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{
fontSize: 24
}}></TextInput>,
headerRight: props => <FontAwesome5 {...props} name={'search'} size={22} color="white" style={{ marginRight: 15 }}></FontAwesome5>
}
return (
<View>
</View>
)
}
export default SearchScreen;
在navigation.setOptions一行什么都没有发生,默认的screenOptions Stack.Navigator继续运行。
答案
试着改变这个
navigation.setOptions = {
headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{
fontSize: 24
}}></TextInput>,
headerRight: props => <FontAwesome5 {...props} name={'search'} size={22} color="white" style={{ marginRight: 15 }}></FontAwesome5>
}
对此。
navigation.setOptions({
headerTitle: props => <TextInput {...props} placeholder="Search" placeholderTextColor="#FFFF" style={{
fontSize: 24
}} />,
headerRight: props => <FontAwesome5 {...props} name={'search'} size={22} color="white" style={{ marginRight: 15 }}></FontAwesome5>
})
以上是关于navigation.setOptions不改变的主要内容,如果未能解决你的问题,请参考以下文章