在本机反应中动态创建新屏幕

Question

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

浏览器中的一个重要功能是选项卡功能，用户可以为不同的 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>
    )
  }
}

Answer 2

React Navigation 5 允许您动态 add/remove 屏幕：https://next.reactnavigation.org

但是对于你的情况，看起来一个好的方法是使用堆栈导航器：

使用 navigation.push 添加新屏幕，每条路线使用不同的参数：（例如 navigation.push('Tab', { url: '...' })
然后呈现一个显示选项卡列表的自定义 header

这应该实现与选项卡式移动浏览器相同的行为。

在本机反应中动态创建新屏幕

Dynamically creating new screen in react-native

react-native

react-native-navigation

react-navigation