Не те, которые можно есть…

Чипы могут пригодиться в мобильных приложениях, где вам нужно отображать сложные объекты небольшими блоками. Фишки - это, по сути, текст, отображаемый на закругленном фоне, дополнительный значок чипа. Они отмечены флажком и также могут содержать значки.

Чипы очень легко внедрить, поэтому я выбрал их для написания своей первой статьи: D. Если вы обнаружите какие-либо проблемы с реализацией, напишите мне в разделе комментариев. Итак, приступим.

Я использую библиотеку react-native-paper, поскольку она удобна с другими множеством нестандартных стильных компонентов, которые могут вам понадобиться в вашем приложении (даже если вы не думали, что вам это нужно), но их Есть несколько вариантов, если вам нужен только компонент микросхемы, а не все ненужные компоненты, идущие с ним, я перечислю два:

Реагировать-родной-чип

Реагировать-родной-чип-вид

Хорошо, сначала первый шаг, нам нужно установить библиотеку


yarn add react-native-paper
// or if you're using npm
npm install react-native-paper

Если вы работаете в обычном проекте React Native, вам также необходимо установить и связать react-native-vector-icons.

yarn add react-native-vector-icons
// or if you're using npm
npm install react-native-vector-icons
//if you are using react-native version smaller than 0.60 you'll need to manually link 
react-native link react-native-vector-icons

Теперь для Android все готово. Но для iOS может потребоваться установка модулей. Если в вашем проекте еще нет подфайла, вам необходимо сначала инициализировать его в своем проекте, для получения дальнейших указаний перейдите по этой ссылке или по любой другой, которая вам нравится.

И просто запустите его в своем проектном терминале:

$ cd ios && pod install && cd ..

Это свяжет библиотеку и установит все модули для вас.
Примечание. Теперь всякий раз, когда вы вносите изменения в нативную часть приложения, вам нужно закрыть упаковщик и запустить новый экземпляр, чтобы изменения вступили в силу.

$ react-native run-ios

Теперь, когда наш проект настроен, давайте создадим несколько чипов.

import { Chip } from 'react-native-paper';

включите Chip в начало файла javascript.

return (
<View style = {{flex:1}}>
  <Chip
  key={index}
  textStyle={{ color: Color.WHITE, fontSize: 15 }}
  style={{ backgroundColor: randomColor() }}
  onPress={() => Alert.alert('Clicked Chip')>
     I'm Chip
  </Chip>
</View>
);

Приведенный выше код добавит на ваш экран одну микросхему, довольно интересно, ха?

Теперь добавим динамические фишки:

Первым делом инициализируйте источник данных, я создаю константный массив строк, но вы можете идти, как хотите

const dataSource = [
"Volvo", "Alpha Sports", "Ford", "Gräf & Stift", "Aston Martin", "BMW", "Tarrant Automobile","Push", "Österreichische Austro-Fiat", "Mazda", "Rosenbauer"
]

и сейчас…

<View style = {{flex:1}}>
{
 dataSource.map((item, index) => {
   return (
    <View style={{
    margin: 5,
    flexWrap: 'wrap',
    }}>
       <Chip
       key={index}
       mode="outlined" //changing display mode, default is flat.
       height={30} //give desirable height to chip
       textStyle={{ color:'white',fontSize: 15 }} //label properties
       style={{ backgroundColor: randomColor() }} //display diff color BG
       onPress={() => Alert.alert('Clicked Chip'+ item)}>
       //display text of clicked chip

      //item to display in chip label  
      {item}
      </Chip>
  </View>
);
})}
</View>

В приведенном выше коде мы берем массив String и отображаем каждый элемент как объект Chip с разными цветами фона, для этого я создал вспомогательную функцию, которая принимает массив цветов и возвращает случайный цвет.

const color = ['red', '#66CCFF', '#FFCC00', '#1C9379', '#8A7BA7'];
randomColor = () => {
let col = color[Math.floor(Math.random() * color.length)];
return col;
};

Вот как выглядит результат:

Довольно круто, правда? Все еще не то, что вам нужно? Вы можете настроить его еще больше. Компонент Chip имеет различные стили, вы можете проверить их здесь.

Вы можете добавить значок, аватар, установить выбранное значение и цвет и даже отключить чип, сделав его серым.

Ого, чувак. Наконец-то мы закончили. Я постарался дать вам подробную информацию о том, как добавить динамические чипы в приложения для Android и iOS. Спасибо, что прочитали мою статью. Пожалуйста, хлопайте в ладоши, если вам понравилось!