import { Tab } from 'tuya-panel-kit'

const [state, set] = React.useState({ tab: 'Tab 1' })
const setState = value => set({ ...state, ...value })
const tabPaneArr = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4']
const contentStyle = {
  height: 323,
  backgroundColor: '#fff',
  alignItems: 'center',
  justifyContent: 'center',
}
const textArr = ['The prime year does not come again', 'A day is hard to come in the morning', 'Time to encourage yourself', 'Time treats no one']
const tabPanes = tabPaneArr.map((item, idx) => (
  <Tab.TabPane key={`${item}`} tab={`${item}`}>
    <View style={contentStyle}>
      <TYText>{`This is ${item}: ${textArr[idx]}`}</TYText>
    </View>
  </Tab.TabPane>
))

<Tab
  activeKey={state.tab}
  animated={true}
  onChange={value => setState({ tab: value })}
  tabsContainerStyle={{
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#fff',
  }}
  tabBarBackgroundColor="#F5F5F6"
  tabTextStyle={{ fontSize: 16, color: '#A8ACB2' }}
  tabStyle={{
    height: 42,
    backgroundColor: '#fff',
    borderTopColor: '#F5F5F6',
    borderTopWidth: 1,
  }}
  tabActiveTextStyle={{
    color: '#FF4800',
  }}
  tabBarUnderlineStyle={{
    backgroundColor: '#FF4800',
    height: 2,
    width: 40,
    marginLeft: 26,
  }}
>
  {tabPanes}
</Tab>