在静态布局中反应导航选项卡导航器答案

【问题标题】：react navigation tab navigator inside static layout在静态布局中反应导航选项卡导航器
【发布时间】：2018-05-01 05:39:30
【问题描述】：

我可以实现这个布局吗？

布局草图：

标题部分在所有选项卡之间共享。它是此屏幕布局的一部分。每个选项卡都包含一个滚动视图。

顺便说一句，我尝试将选项卡导航器定义为一个组件，并在渲染方法中使用它，以及静态标题组件。

render() {
  return ( 
    <StaticHeaderComponent />
    <MyTabNavigator />
  ) 
}

那行不通。选项卡导航器根本不呈现。

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

这是一个简单的工作示例：

MyTabNavigator.js

import React, { Component } from 'react'
import { View, Text, ScrollView } from 'react-native'
import { TabNavigator } from 'react-navigation'

class FirstTab extends Component {
    render() {
        return (
            <ScrollView>
                <Text>first tab</Text>
            </ScrollView>
        )
    }
}

class SecondTab extends Component {
    render() {
        return (
            <ScrollView>
                <Text>second tab</Text>
            </ScrollView>
        )
    }
}

const MyNavigator = TabNavigator({
    first: { screen: FirstTab },
    second: { screen: SecondTab }
},
{
    tabBarPosition: 'top'
})

export default MyNavigator

App.js

import React, { Component } from 'react'
import { View } from 'react-native'
import MyTabNavigator from './MyTabNavigator'

export default class App extends Component {
    render() {
        return (
            <View style={{flex: 1}}>
                <View // place your StaticHeaderComponent here
                    style={{height: 100, backgroundColor: 'green'}}
                />
                <MyTabNavigator/>
            </View>
        )
    }
}

【讨论】：

根据反应导航 3，这给出了错误：不变违规：此导航器缺少导航道具。在 react-navigation 3 中，您必须直接设置您的应用容器。`

【解决方案2】：

对于 react-navigation 3.+，文档的常见错误部分会派上用场。您可以找到文档和示例here。

具体来说，您需要公开static router 并将navigation 作为道具传递。您可以根据需要进一步自定义选项卡样式。

const TabbyNavigator = createMaterialTopTabNavigator({   
  Tab: TabScreen,   
  AnotherTab: AnotherTabScreen
});

class SomeScreen extends React.Component {   
  static router = TabbyNavigator.router;

  render() {
    return (
      <TabbyNavigator navigation={this.props.navigation} />
    );   
  } 
}

【讨论】：