react-native - 如何在 React Native formSheet 模态中创建嵌入式 Stack 导航器？

Question

像这样:



我在运行 react-navigation v4.

Answer 1

首先，您必须遵循有关如何设置 react-navigation 模态的教程，该模态具有跳转动画并且看起来不像 native formSheet。您必须设置一个堆栈导航器，将根导航器作为一个子项，将模态作为另一个子项:



它可以扩展，因为您可以拥有多个这些模态作为 child 。

代码如下:

const RootNavigator = createStackNavigator(
  {
    index: { screen: AppNavigator },
    [NC.SCREEN_ROOM_INFO]: { screen: RoomInfoNavigator },
    [NC.SCREEN_CHAT_CREATE]: { screen: RoomCreateNavigator },
    [NC.SCREEN_CHAT_SEARCH]: { screen: ChatSearchNavigator },
    [NC.SCREEN_CHAT_GIF_PICKER]: { screen: GifPickerNavigator }
  },
  {
    mode: 'modal',
    headerMode: 'none',
    transitionConfig: () => ({
      transitionSpec: {
        duration: 0
      }
    }),
    transparentCard: true
  }
)

然后你需要实现这些，在我的例子中，4个导航器将显示为模态，每个像这样:

// Here you'll specify the screens you'll navigate in this modal, starting from index.
const RoomInfoStack = createStackNavigator({
  index: { screen: NavigableRoomInfo },
  [NC.SCREEN_ROOM_ROSTER]: { screen: NavigableRoomRoster },
  [NC.SCREEN_ROOM_NOTIFICATION_PREFERENCES]: { screen: NavigableRoomNotificationPreferences },
  [NC.SCREEN_ROOM_EDIT]: { screen: NavigableRoomEdit }
})

type NavigationComponent<T = any> = {
  navigation?: NavigationScreenProp<NavigationState, T>
}

type Props = NavigationComponent

// THIS code is from the react-navigation tutorial on how to make a react-navigation modal:
// https://reactnavigation.org/docs/4.x/custom-navigators/#extending-navigators

class RoomInfoNavigator extends React.Component<Props> {
  static router = {
    ...RoomInfoStack.router,
    getStateForAction: (action, lastState) => {
      // check for custom actions and return a different navigation state.
      return RoomInfoStack.router.getStateForAction(action, lastState)
    }
  }

  constructor(props) {
    super(props)
    this.onClose = this.onClose.bind(this)
  }

  onClose() {
    this.props.navigation?.goBack()
  }

// And here is the trick, you'll render an always open RN formSheet
// and link its dismiss callbacks to the goBack action in react-navigation
// and render your stack as its children, redirecting the navigator var to it in props.

  render() {
    return (
      <Modal
        visible={true}
        animationType={'slide'}
        supportedOrientations={['portrait', 'landscape']}
        presentationStyle={'formSheet'}
        onRequestClose={() => this.onClose()}
        onDismiss={() => this.onClose()}
      >
        <RoomInfoStack {...this.props} />
      </Modal>
    )
  }
}

export { RoomInfoNavigator }

这个导出是我们的根堆栈之前导入的。然后你只需要渲染屏幕，我有一个模式，我可以将导航参数提取到 Prop ，以防这个屏幕在没有导航的情况下显示:

const NavigableRoomInfo = (props: NavigationComponent<RoomInfoProps>) => {
  const roomInfo = props.navigation!.state!.params!.roomInfo
  const roomInfoFromStore = useRoomFromStore(roomInfo.id)

  // Here I update the navigation params so the navigation bar also updates.

  useEffect(() => {
    props.navigation?.setParams({
      roomInfo: roomInfoFromStore
    })
  }, [roomInfoFromStore])

  // You can even specify a different Status bar color in case it's seen through modal view:

  return (
    <>
      <StatusBar barStyle="default" />
      <RoomInfo roomInfo={roomInfoFromStore} navigation={props.navigation} />
    </>
  )
}

资料来源:
https://reactnavigation.org/docs/4.x/modal

https://reactnavigation.org/docs/4.x/custom-navigators/#extending-navigators