Как изменить цвет на React-native-tab-view?

Я новичок в реагировании и изучении этого. Изучая response-native-tab-view, я пытался изменить его цвет, но после нескольких попыток мне это не удалось. Я буду очень благодарен, если кто-нибудь подскажет мне, как изменить цвет панели вкладок, которая по умолчанию синяя. Вот ссылка на npm response-native-tab-view и вот фрагмент кода. Любая помощь будет высоко ценится.

import * as React from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
import { TabView, SceneMap } from 'react-native-tab-view';
 
const FirstRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#ff4081' }]} />
);
 
const SecondRoute = () => (
  <View style={[styles.scene, { backgroundColor: '#673ab7' }]} />
);
 
const initialLayout = { width: Dimensions.get('window').width };
 
export default function TabViewExample() {
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'First' },
    { key: 'second', title: 'Second' },
  ]);
 
  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });
 
  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={renderScene}
      onIndexChange={setIndex}
      initialLayout={initialLayout}
    />
  );
}
 
const styles = StyleSheet.create({
  scene: {
    flex: 1,
  },
});

react-native react-native-tab-view
person Dilawer Hussain    schedule 26.10.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

Изменение цвета фона панели вкладок

Если вы обратитесь к этому разделу, стили для вкладки bar необходимо будет передать после объявления пользовательского компонента React с помощью renderTabBar prop.

<TabView
  navigationState={{ index, routes }}
  renderScene={renderScene}
  onIndexChange={setIndex}
  initialLayout={initialLayout}
  renderTabBar={props => <TabBar {...props} style={{backgroundColor: 'black'}}/>} // <-- add this line
/>

Изменение цвета текста на панели вкладок

Если вы обратитесь к этому,

<TabBar
  renderLabel={({route, color}) => (
    <Text style={{ color: 'black', margin: 8 }}>
      {route.title}
    </Text>
  )}
  style={{backgroundColor: 'white'}}
  ...
/>

Не стесняйтесь экспериментировать, используя пример закуски. . :)

person kenmistry    schedule 26.10.2020
comment
Что, если я хочу изменить цвет текста? т.е. я хочу изменить ПЕРВЫЙ, ВТОРОЙ и ТРЕТИЙ на черный. Как это можно сделать? - person Dilawer Hussain; 26.10.2020
comment
@DilawerHussain, вам нужно будет использовать опору renderLabel, чтобы добавить компонент Text. см. мой обновленный ответ в качестве примера. - person kenmistry; 26.10.2020

arrow_upward
0
arrow_downward

Вам необходимо создать собственный response-native-tab-view -custom-tabbar

Подробнее здесь response-native-tab-view # readme

person Nooruddin Lakhani    schedule 26.10.2020