在react-native中动态创建新屏幕

Question

我正在尝试使用react-native和react-native-web-view创建Web浏览器。

浏览器的关键功能之一是标签功能，用户可以在其中为不同的URL创建多个标签并在它们之间切换。

逻辑是，每当用户创建新标签时，将新屏幕推送到导航（无需静态预定义）。但是，像react-navigation这样的导航库不允许这样做。在加载相应的屏幕之前，必须预先定义屏幕。

我想要...的行

const pressNewTab=()=>{
   NavigationActions.navigate({ routeName: `${newRouteName}`, params: { id, ...otherParams } }),
}

有什么方法可以实现此功能？

Answer 1

我认为您可以通过以下方式实现此目标：让我们想象一下，例如，用户是否创建了数据数组

notes = ['Note1'，'Note2'，'Note3'，'Note4']

class TabScreen extends Component {
   Tabs = navigation => {
    let notes=['Note1', 'Note2', 'Note3', 'Note4']
    notes = notes.reduce((val, tab) => {
      val[tab] = {
        screen: tab
      }
      return val
    }, {})

    const Tabs = createTabNavigator({
        ...notes
      },
      {
        ...TabNavigator.Presets.AndroidTopTabs,
        lazyLoad: false,
        tabBarOptions: {
          scrollEnabled: true,
          style: {
            backgroundColor: Colors.snow,
            height: Header.HEIGHT - 15
          },
          tabStyle: {
            width: 100
          },
          indicatorStyle: {
            width: 0
          }
        }
      }
    )return <Tabs />
  }

render () {
    const { navigation } = this.props
    return (
      <View style={styles.container}>
          {this.Tabs(navigation)}
      </View>
    )
  }
}