Question

如何使用react-native-tab-view获得顶部和底部导航。到目前为止，我已经实现了分别获得底部或顶部导航。主要标签组件：

favoritesTab = () => (
<View style={styles.container}>
  <Favorites />
</View>
  )

  stockTab = () => (
    <View style={styles.container}>
      <Stock />
    </View>
  )

  newsTab = () => (
    <View>
      <News />
    </View>
  )

主标签的归约器（有效载荷为操作中的索引）

import { Actions } from '../../../constants'

const initialState = {
  index: 0,
  previousIndex: 0,
  routes: [
    { key: 'favorites', title: 'Favorites', icon: 'md-heart' },
    { key: 'search', title: 'Search', icon: 'md-search' },
    { key: 'news', title: 'News', icon: 'logo-news' },
  ]
}

export const tabs = (state = initialState, action) => {
  switch (action.type) {
    case Actions.SET_TAB:
      return { ...state, index: action.payload, previousIndex: state.index }
    default:
      return state
  }
}

新闻标签组件：

businessTab = () => (
        <View style={styles.container}> <Business /> </View>
    )
    generalTab = () => (
        <View style={styles.container}> <General /> </View>
    )
    scienceTab = () => (
        <View style={styles.container}> <Science /> </View>
    )
    techTab = () => (
        <View style={styles.container}> <Tech /> </View>
    )
News Reducer:
sceneMapNews = SceneMap({
        business: this.businessTab,
        general: this.generalTab,
        science: this.scienceTab,
        tech: this.techTab,
    })

    tabBarNews = props => (
        <TabBar
          {...props}
          indicatorStyle={styles.indicatorStyle}
          labelStyle={styles.labelStyle}

          style={styles.tabBar}
          useNativeDriver={true}
          //scrollEnabled={true}
          tabStyle={{ paddingHorizontal: 0, paddingVertical: 8, width: 84 }}
          renderIcon={this.renderIcon}
        />
      )

News Tabs组件与Main Tabs Reducer完全一样。但是ofc具有不同的键和标题。那么，如何合并两个路由器？

React Native中的顶部和底部导航

0 个答案: