在靜態布局中反應導航選項卡導航器

Question

我可以實現這種布局嗎？

布局草圖：

標題部分在所有選項卡之間共享。 它是此屏幕中布局的一部分。 每個選項卡都包含一個滾動視圖。

順便說一句，我已經嘗試將選項卡導航器定義為一個組件，並在渲染方法中使用它，以及靜態標題組件。

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

這是行不通的。 標簽導航器根本不呈現。

Answer 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

應用程序.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>
        )
    }
}

Answer 2

對於 react-navigation 3.+，文檔的常見錯誤部分會派上用場。 您可以在此處找到文檔和示例。

具體來說，您需要公開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} />
    );   
  } 
}