상단 네비게이션 아이콘 추가 관련 문의

개발
1 
 const { addAccessoryButton } = useTopNavigation();

  addAccessoryButton({
    title: "마이",
    icon: {
      name: "icon-user-mono",
    },
    id: "my-page",
    onPress: () => navigation.navigate("/my-page"),
  });

위 코드로 헤더에 아이콘을 생성하면 초기 화면에서는 아예 안 보이거나(새로고침해야 보임), 보이더라도 다른 페이지를 갔다가 헤더의 뒤로가기 기능으로 돌아오면 아이콘이 안보이는 문제가 있습니다
해결 방안이 있을까요??

2

안녕하세요, granite.config.ts 에서 처리하실 수 있습니다 :slight_smile:
샘플코드 전달드려요

import { appsInToss } from '@apps-in-toss/framework/plugins';
import { defineConfig } from '@granite-js/react-native/config';

export default defineConfig({
  scheme: 'intoss',
  appName: 'my-granite-app-1',
  plugins: [
    appsInToss({
      brand: {
        displayName: 'my-granite-app-1', // 화면에 노출될 앱의 한글 이름으로 바꿔주세요.
        primaryColor: '#3182F6', // 화면에 노출될 앱의 기본 색상으로 바꿔주세요.
        icon: "",
        bridgeColorMode: 'basic',
      },
      permissions: [],
      navigationBar: {
        withBackButton: true,
        withHomeButton: true,
        initialAccessoryButton: {
          icon: {
            name: 'icon-heart-mono',
          },
          id: 'heart',
          title: '하트',
        },
      },
    }),
  ],
});
3 
navigationBar: {
        withBackButton: true,
        withHomeButton: true,
        initialAccessoryButton: {
          icon: {
            name: "icon-user-mono",
          },
          id: "my-page",
          title: "마이",
        },
      },

말씀하신대로 코드를 수정했는데 아이콘이 보이지 않습니다
또한 아이콘을 눌렀을때의 액션을 지정할수는 없는건가요?

4

정상적으로 노출 되는 것 같습니다 :cry:
framework 몇 버전을 쓰시나요 ?

5

서버 종료후 다시 실행하니까 해결됐습니다 감사합니다
궁금한게 있는데 공지사항에는 addAccessoyButton방식 또는 granite.config.ts 선택해서 사용 가능한걸로 되있는데
addAccessoryButton에서 발생한 이슈를 해결할수는 없는걸까요? (첫번째 문의사항 이슈) 특정 페이지에서만 버튼이 보이도록 처리를 하고싶습니다. 또한 granite.config.ts 방식 사용시 onPress같은 이벤트 등록은 불가능한걸까요?

6

granite.config.ts 에서 아이콘을 추가하신 후, 아래와 같이 이벤트 리스너에 이벤트를 등록할 수 있어요!

import { tdsEvent } from '@toss-design-system/react-native';
    const cleanup = tdsEvent.addEventListener('navigationAccessoryEvent', {
      onEvent: ({ id }) => {
        Alert.alert('Button Clicked', `ID: ${id}`);
      },
    });
7

addAccessoryButton 를 사용하셔도 돼요! :slight_smile:
addAccessoryButton가 그려지는 시점을 잘 조절하면 될 것 같습니다

8

넵 답변 감사합니다!