我在用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>
})