React Navigator(탐색 반응) 버튼을 사용하여 모달 화면을 푸시하는 방법

React Navigator(탐색 반응) 버튼을 사용하여 모달 화면을 푸시하는 방법

React Navigation 탭 네비게이터 https://reactnavigation.org/docs/navigators/tab을 사용하여 탭 버튼 중 하나를 전체 화면 모달로 위로 푸시하려면 어떻게 해야 하는가?스택 네비게이터가mode=modal옵션의를 클릭할 때 해당 모드를 사용하려면 어떻게 해야 하는가?TakePhoto탭 단추?현재 이 항목을 클릭하면 하단의 탭 막대가 여전히 표시된다.

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen, // how can I have this screen show up as a full screen modal?
  },
});

사실, 즉석에서 발표하는 방식을 바꿀 수 있는 리액션 네비게이션에 대한 지원은 없다.default로modal(이 문제에 대한 자세한 내용은 여기를 참조하십시오.)같은 문제에 부딪쳐 아주 윗도리를 써서 해결했다.StackNavigator와 함께headerMode로 설정하다.none그리고mode로 설정하다.modal:

const MainTabNavigator = TabNavigator(
    {
        Tab1Home: { screen: Tab1Screen },
        Tab2Home: { screen: Tab2Screen }
    }
);

const LoginRegisterStackNavigator = StackNavigator({
    Login: { screen: LoginScreen }
});

const ModalStackNavigator = StackNavigator({
    MainTabNavigator:          { screen: MainTabNavigator            },
    LoginScreenStackNavigator: { screen: LoginRegisterStackNavigator }
}, {
    headerMode: 'none',
    mode:       'modal'
});

이렇게 하면 다음(환원기 사용)을 수행할 수 있다.Tab1Screen그리고Tab2Screen원하는 곳에서 모달 뷰를 가져오려면:

this.props.navigation.navigate('LoginScreenStackNavigator');

이게 여전히 너에게 관련이 있는지는 모르겠지만, 난 이걸 이루기 위해 어떻게든 찾아냈어.

그래서 탭내부의 탭바구성요소를 이용하여 간신히 작동시켰는데, 당신은 인덱스에 따라 탭 네비게이터가 움직이는 것을 중지할 수 있다.

   tabBarComponent: ({jumpToIndex, ...props, navigation}) => (
        <TabBarBottom
            {...props}
            jumpToIndex={index => {
                if (index === 2) {
                    navigation.navigate('camera')
                }
                else {
                    jumpToIndex(index)
                }
            }}
        />

    )

일단 이렇게 하고 나면, 탭 보기 위에 뷰를 수동으로 표시하는 내 방법은 탭나비게이터를 스택나비게이터 내부에 넣은 다음 스택나비게이터 내부의 새 화면으로 이동하는 것이었습니다.

react-navigation의 bottomTabNavigator는tabBarOnPress탭 프레스를 재정의하는 데 사용할 수 있는 탐색 옵션:

https://reactnavigation.org/docs/en/bottom-tab-navigator.html#tabbaronpress

const AppContainer = createStackNavigator(
  {
    default: createBottomTabNavigator(
      {
        TAB_0: Stack0,
        TAB_1: Stack1,
        TAB_2: Stack2,
        TAB_3: View // plain rn-view, or any old unused screen
      },
      {
        defaultNavigationOptions: {
          // other tab navigation options...
          tabBarOnPress: ({ navigation, defaultHandler }) => {
            if (navigation.state.key === 'TAB_3') {
              navigation.navigate('tabToOpenAsModal');
            } else {
              defaultHandler();
            }
          }
        }
      }
    ),
    tabToOpenAsModal: {
      screen: TabToOpenAsModalScreen
    }
  },
  {
    mode: 'modal',
    headerMode: 'none'
  }
);

탭 네비게이터를 모달과 함께 스택 네비게이터에 중첩하는 경우 탭 표시줄 단추를 누를 때 열 수 있다.모달은 탭이 아니라 열려 있었기 때문에 모달이 닫히면 앱은 모달 탭을 누르기 전에 보았던 화면으로 되돌아간다.

탭 표시줄을 삭제하는 한 가지 방법은 탭 표시줄을 숨기는 것이다.visible: false:

const MyApp = TabNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  TakePhoto: {
    screen: PhotoPickerScreen,
    navigationOptions: {
      tabBar: {
        visible: false,
      },
    },
  },
});

그러나, 그것이 전체 화면으로의 전환을 유발하지 않는 것 같은데, 나는 이것이 원하는 것이라고 생각한다.

다른 옵션은 포장하는 것이다.PhotoPickerScreen새 StackNavigator 내부 및 해당 네비게이터를 모드='modal'로 설정하십시오.

탭의 onPressItem에서 해당 모달로의 탐색을 트리거해야 할 수 있다(예: navigation.navigate('TakePhoto').)

참고, 나 스스로 항법 구조를 가장 잘 만드는 방법에 대해 머리를 싸매고자 한다.

세 번째 옵션, StackNavigator를 상위 항목으로 구현한 다음MyAppTabNavigator가 가장 유연한 솔루션이 될 수 있다.그러면 TakePhoto 화면이 TabNavigator와 같은 레벨이 되어 어디에서나 로케이팅을 할 수 있게 된다.

네가 어떤 아이디어를 내는지 듣고 싶어!

나는 두 가지 해결책을 제안한다.

첫 번째는 숨기는 거야

2차 버전인 경우 https://reactnavigation.org/docs/hiding-tabbar-in-screens을 참조하십시오.

<Tab.Screen
name={Routes.CREATE_ANNOUNCEMENT_SCREEN}
// name={Routes.TEST_SCREEN}
options={{
.
.
.
  tabBarVisible: false,    <----- solution 1
  tabBarButton: (props) => (   <----- or solution 2
    <TouchableOpacity
      {...props}
      onPress={() => {
        navigation.navigate(Routes.DETAILS_SCREEN);
      }}
    />
  ),
}}
component={CreateAnnouncementScreen}
/>

일부 지역에서는 문서들이 패치되어 있지만, 여기에서는 다음과 같다.

    export default class HomeScene extends Component {

        static navigationOptions = {
        title: 'foo',
        header:{
                    visible: true
                }
        }
        ....
      }

참조URL: https://stackoverflow.com/questions/42398911/how-do-i-make-a-tabnavigator-button-push-a-modal-screen-with-react-navigation