React Navigation - Tab Navigation - 仅从一个类中获取不同的屏幕

Question

可以在不超过一个类的情况下在选项卡之间进行更改吗？

在我的代码中，我有一个返回多个组件的类，我希望 TabNavigator 在这些组件之间切换，而不是像 React Navigation 文档 (https://reactnavigation.org/docs/tab-based-navigation.html) 中那样在类之间切换。

class Monument extends Component{
    render(){
        const {navigate} = this.props.navigation;
        const { data } = this.props.navigation.state.params;

        return (
            <MonumentMaker category={'Castelos'} navigate={navigate} data={data}/>
            <MonumentMaker category={'Museus'} navigate={navigate} data={data}/>
            <MonumentMaker category={'Igrejas'} navigate={navigate} data={data}/>
            <MonumentMaker category={'Locais de Interesse'} navigate={navigate} data={data}/>
        );
    }
}

export default TabNavigator({
  Convento: {
    screen:**first component**
  },
  Museus: {
    screen:**second component**
  },
  Igrejas: {
    screen:**third component**
  },
  OutrosLocais: {
    screen:**forth component**
  }
})

我想要完成的可能是什么？

感谢您的帮助！

Answer 1

您可以按如下方式设置TabNavigation

const myTabNavigator = TabNavigator({
   Convento: {
    screen: { screen: props => <Monument {...props} {...myProps} /> }
  },
  Museus: {
    screen: { screen: props => <Monument {...props} {...myProps} /> }
  },
  Igrejas: {
    screen: { screen: props => <Monument {...props} {...myProps} /> }
  },
  OutrosLocais: {
    screen: { screen: props => <Monument {...props} {...myProps} /> }
  }
})

Monument.js

const Monument = ({...props}, {...myProps}) => (
  <View>
     {...// More stuff}
  </View>
)