feat(Navigation): export navgationRef (#111)

* feat(Navigation): export navgationRef * feat: export navigationContainerProps * chore: add modalVisible * chore: apply navigationRef Co-authored-by: 洛竹 <[email protected]>
tuya · Aug 10, 2021 · bb1880e · bb1880e
1 parent 333292b
commit bb1880e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/example/src/main.tsx b/example/src/main.tsx
@@ -45,9 +45,16 @@ interface Props {
   theme: GlobalTheme;
 }
 
-const Navigator = createNavigator<Props>({
-  router,
-  screenOptions: {},
-});
+const Navigator = createNavigator<Props>(
+  {
+    router,
+    screenOptions: {},
+  },
+  {
+    onStateChange: state => {
+      console.log(state);
+    },
+  }
+);
 
 export default composeLayout(store, Navigator);
diff --git a/packages/tuya-panel-kit/src/components/layout/react-navigation/index.js b/packages/tuya-panel-kit/src/components/layout/react-navigation/index.js
@@ -86,7 +86,7 @@ function RouteIntercept(props) {
 
 const Stack = createStackNavigator();
 
-export default function createNavigator({ router, screenOptions }) {
+export default function createNavigator({ router, screenOptions }, navigationContainerProps = {}) {
   const defaultScreenOptions = {
     cardOverlayEnabled: true,
     ...SlideFromRightIOS,
@@ -119,6 +119,7 @@ export default function createNavigator({ router, screenOptions }) {
       this.state = {
         modalVisible: false,
       };
+      this.navigationRef = null;
     }
 
     componentDidMount() {
@@ -356,21 +357,28 @@ export default function createNavigator({ router, screenOptions }) {
 
     render() {
       const { modalVisible } = this.state;
-
       return (
         <View style={{ flex: 1 }}>
           <NavigationContainer
+            {...navigationContainerProps}
             theme={{
               ...DefaultTheme,
               colors: { ...DefaultTheme.colors, background: 'transparent' },
             }}
-            onStateChange={this.handleNavigationStateChange}
+            onStateChange={state => {
+              this.handleNavigationStateChange();
+              navigationContainerProps.onStateChange &&
+                navigationContainerProps.onStateChange(state);
+            }}
+            ref={value => {
+              this.navigationRef = value;
+            }}
           >
             <Stack.Navigator
               initialRouteName="main"
               screenOptions={({ route, navigation }) => {
                 this._navigation = navigation;
-                TYSdk.applyNavigator(navigation);
+                TYSdk.applyNavigator({ ...navigation, ...this.navigationRef });
                 const options = this.getScreenOptions(
                   { route, navigation },
                   screenOptions,