从JSON动态创建React Native导航

如何解决从JSON动态创建React Native导航

基本上，由于react-native-dynamic-render，我的整个React-Native组件都是从JSON（托管在Firebase上）中动态呈现的。

我的问题是我需要使用相同的想法动态创建React-Navigation...。例如，如果我从pages表中删除页面，则该选项卡不应该存在；如果我添加一个，它应该在下一个应用加载时添加它，等等。

关于如何做到这一点的任何想法？

下面，我的app.js代码和托管在Firebase上的JSON。

import * as React from 'react';
import { StyleSheet,View } from 'react-native';
import DynamicComponent from 'react-native-dynamic-render';
import ButtonComp from './components/Button';
import Firebase from './configFirebase';

export default class App extends React.Component {
  constructor() {
    super ()
    this.state = {}
  }

  componentDidMount() {
    const ref = Firebase.database().ref();

    ref.on('value',(snapshot) => {
      this.setState({
        element: snapshot.val()
      })
    });
  }


  render(){
    
    const mapComponents = {
      view: View,button: ButtonComp,}

    console.log(this.state.element)
    
    return (
      <View style={styles.container}>        
         <DynamicComponent
          {...this.state.element}
          mapComponents={mapComponents}
        />         
      </View>

      
    );
  }
}

{
    "name": "view","_uid": "123","children": [

      {
        "name":"button","_uid": 1234,"props": {
          "title": "Bouton original 1","color": "#841584","accessibilityLabel": "Learn more about this purple button"
        }
      },{
        "name":"button","_uid": 12345,"props": {
          "title": "Bouton original 2","_uid": 123456,"props": {
          "title": "Bouton original 3","accessibilityLabel": "Learn more about this purple button"
        }
      }

    ]
}