Как создать пользовательскую панель вкладок Top в React Native, используя реагировать на навигацию? - PullRequest
Новая
       43

Как создать пользовательскую панель вкладок Top в React Native, используя реагировать на навигацию?

0 голосов
/ 19 сентября 2019

enter image description here Я новичок, чтобы реагировать на Native, поэтому я не знаю, как создать пользовательскую верхнюю панель вкладок, какая-нибудь помощь или ссылка для этого?

Вывод TabBar должен выглядеть следующим образомэто если я нажимаю на день, то на день рендеринг компонента, если я нажимаю на неделю, то недельные компоненты рендерится так.Заранее спасибо

1 Ответ

0 голосов
/ 19 сентября 2019

Вы можете найти множество учебных пособий для создания настраиваемой вкладки.Используйте createMaterialTopTabNavigator для создания верхней панели. 

import { createMaterialTopTabNavigator, createAppContainer } from "react-navigation"
import TabBar from './TabBar'

const TabNavigator = createMaterialTopTabNavigator({
  feed: {
    screen: () => null,
  },
  profile: {
    screen: () => null,
  },
  inbox: {
    screen: () => null,
  }
}, {
  tabBarComponent: TabBar,
})

export default createAppContainer(TabNavigator)

Компонент TabBar 

import * as React from "react"
import { View } from "react-native"
import Tab from './Tab'

const TabBar = (props) => {
  const { navigationState, navigation, position } = props
  return (
    <View style={{
      height: 80,
      backgroundColor: 'seashell',
      flexDirection: "row",
      justifyContent: 'space-around',
      alignItems: 'center',
    }}>
    {navigationState.routes.map((route, index) => {
      const focusAnim = position.interpolate({
        inputRange: [index - 1, index, index + 1],
        outputRange: [0, 1, 0]
      })
      return (
        <Tab 
          focusAnim={focusAnim}
          title={route.routeName} 
          onPress={() => navigation.navigate(route.routeName)}
        />
      )
    })}
    </View>
  )
}

export default TabBar

Компонент вкладки 

import * as React from "react"
import { Animated, TouchableOpacity } from "react-native"

const Tab = ({ focusAnim, title, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Animated.View
        style={{
          padding: 10,
          borderRadius: 10,
          backgroundColor: focusAnim.interpolate({
            inputRange: [0, 1],
            outputRange: ["transparent", "tomato"]
          })
        }}
      >
        <Animated.Text
          style={{
            color: focusAnim.interpolate({
              inputRange: [0, 1],
              outputRange: ["#444", "#fff"]
            })
          }}
        >{title}</Animated.Text>
      </Animated.View>
    </TouchableOpacity>
  )
}

export default Tab

Вам нужно сделать стиль в соответствии с вашимнеобходимо.

...