В React Native, как создать пользовательский интерфейс так же, как прикрепленное изображение?

Question

Я должен создать пользовательский интерфейс так же, как прикрепленное изображение. Я должен обернуть вкладки в соответствии с размером текста, который является динамическим (может быть разного размера). Как это сделать в React Native Снимок экрана пользовательского интерфейса

Answer 1

Вы можете использовать модуль react-native-selectmultiple-button, если вы используете пользовательский интерфейс для выбора многих вещей.

Вы можете запустить npm install react-native-selectmultiple-button --save

Пример

import {
  SelectMultipleButton,
  SelectMultipleGroupButton
} from "react-native-selectmultiple-button";

<SelectMultipleButton
  buttonViewStyle={{
    borderRadius: 10,

    height: 40
  }}
  textStyle={{
    fontSize: 15
  }}
  highLightStyle={{
    borderColor: "gray",

    backgroundColor: "transparent",

    textColor: "gray",

    borderTintColor: ios_blue,

    backgroundTintColor: ios_blue,

    textTintColor: "white"
  }}
  multiple={true}
  value={interest}
  selected={this.state.multipleSelectedData.includes(interest)}
  singleTap={valueTap => this._singleTapMultipleSelectedButtons(interest)}
/>;

<SelectMultipleGroupButton
  containerViewStyle={{
    justifyContent: "flex-start"
  }}
  highLightStyle={{
    borderColor: "gray",

    backgroundColor: "transparent",

    textColor: "gray",

    borderTintColor: ios_blue,

    backgroundTintColor: "transparent",

    textTintColor: ios_blue
  }}
  onSelectedValuesChange={selectedValues =>
    this._groupButtonOnSelectedValuesChange(selectedValues)
  }
  group={multipleGroupData}
/>;

Answer 2

Я искал решение и нашел библиотеку с именем act-native-tag-select , которая полностью выполнила мое требование, где я могу настроить представление в соответствии с моим требованием. Спасибо всем, кто ответил.

Добавление некоторого примера кода:

Настройка:

npm install --save react-native-tag-select

или

yarn add react-native-tag-select

Использование:

import { TagSelect } from 'react-native-tag-select';
export default class App extends React.Component {

render() {
const data = [
  { id: 1, label: 'Money' },
  { id: 2, label: 'Credit card' },
  { id: 3, label: 'Debit card' },
  { id: 4, label: 'Online payment' },
  { id: 5, label: 'Bitcoin' },
];


return (
  <View style={styles.container}>

    <TagSelect
      data={data}
      itemStyle={styles.item}
      itemLabelStyle={styles.label}
      itemStyleSelected={styles.itemSelected}
      itemLabelStyleSelected={styles.labelSelected}
    />
  </View>
);}

Answer 3

привет @shivam tiwari это может быть достигнуто разными способами. тем, что одним из лучших методов является использование функции .map со стилями родительского представления flexdirection: row и flexWrap: 'wrap'

также принимают логическое значение, выбранное для каждого элемента в массиве, изначально равным false, и обновляютконкретный элемент в true или false в зависимости от выбора.

Пожалуйста, проверьте ниже пример:

let industries = this.state.industries
    for (let i = 0; i < industries.length; i++) {
            industries[i].selected = false
          }
this.setState({industries: industries})

<View style={{ flexDirection: 'row', flexWrap: 'wrap', margin: 10, marginTop: 5 }}>
{this.renderIndustry(this.state.preferredIndustry)}

и в методе renderIndustry вы можете сделать .map функциональность, такую ​​как

 //RENDER INDUSTRY
  renderIndustry(data) {
    if (data.length === 0) {
      return null
    }
    return data.map((item, index) => {
      return (
        <CardView
          key={item.industryname}
          style={[styles.cardView, { backgroundColor: item.selected ? '#4291E2' : '#F9FAFB', borderWidth: 1, borderColor: item.selected ? '#4291E2' : '#E0E8F1' }]}
          cardElevation={item.selected ? 3 : 0}
          cardMaxElevation={5}
          cornerRadius={10}
          cornerOverlap={false}
        >
          <TouchableWithoutFeedback onPress={() => { this.selectIndustry(item, index) }}>
            <View style={{
              alignItems: 'center',
              justifyContent: 'center',
              height: '100%',
              width: '100%',
              backgroundColor: '#0000'
            }}>
              <Text style={{ fontSize: 14, color: item.selected ? '#fff' : '#000', margin: 15 }}>{item.industryname}</Text>
            </View>
          </TouchableWithoutFeedback>
        </CardView>
      );
    });
  }

и в onPress измените значение выбранного на true или false на основе предыдущего значения, например ....

//SELECT INDUSTRY
  selectIndustry = (item, index) => {
    let industries = this.state.industries
    for (let i = 1; i <= industries.length; i++) {
      if (industries[i - 1].industryid === item.industryid) {
        industries[i - 1].selected = !industries[i - 1].selected
      }
    }
    this.setState({ industries: industries })
  }

НАДЕЖДА, это помогает .... Счастливое кодирование !!