반응형
※변경전
const StackNavigator = ({navigation}) =>{
return (
<Stack.Navigator initialRouteName='MainPage'
screenOptions={{
headerStyle: {
backgroundColor: "white",
borderBottomColor: "white",
shadowColor: "white",
},
headerTitleAlign:"Left",
headerTintColor: "#000",
headerBackTitleVisible: false,
headerRight:()=>(
<View style={{flexDirection:"row", marginHorizontal:10}}>
<TouchableOpacity onPress={()=>{navigation.navigate("SearchPage");}}><Fontisto style={styles.fontImg}name='search'/></TouchableOpacity>
<TouchableOpacity onPress={link}><Fontisto style={styles.fontImg} name='instagram'/></TouchableOpacity>
</View>
)
}}
>
>
▼변경후
const StackNavigator = () =>{
return (
<Stack.Navigator initialRouteName='MainPage'
screenOptions={({navigation})=>({ //navigation을 screenOptions 함수안에 넣어준다
headerStyle: {
backgroundColor: "white",
borderBottomColor: "white",
shadowColor: "white",
},
headerTitleAlign:"Left",
headerTintColor: "#000",
headerBackTitleVisible: false,
headerRight:()=>(
<View style={{flexDirection:"row", marginHorizontal:10}}>
<TouchableOpacity onPress={()=>{navigation.navigate("SearchPage");}}><Fontisto style={styles.fontImg}name='search'/></TouchableOpacity>
<TouchableOpacity onPress={link}><Fontisto style={styles.fontImg} name='instagram'/></TouchableOpacity>
</View>
)
})}
>
도움을 받은 StackOverflow link
https://stackoverflow.com/questions/62127078/react-navigation-5-how-to-navigate-from-headerright
LIST
'React-Native' 카테고리의 다른 글
| React native+Rest api (0) | 2022.11.25 |
|---|---|
| Git&GitHub VSCode 10k delete 깃허브 10k repository 삭제방법 (0) | 2022.08.31 |
| React-native ScrollView 사용법 (0) | 2022.08.27 |
| While trying to resolve module 'idb' from file….this package itself specifies a `main` module field that could not be resolved=>firebase 설치시 오류 (0) | 2022.08.23 |
| React-native 필수 navigation (0) | 2022.08.09 |
