Question

我必须创建与附件图像相同的用户界面。我必须根据动态的文本大小包装标签（可能是不同的大小）。如何在React Native Screenshot of UI

中执行此操作

Answer 1

如果您要使用UI选择许多内容，则可以使用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

hi @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中，根据先前的值（如...）将selected的值更改为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 })
  }

希望如此....祝您编程愉快！

Answer 3

我搜索了解决方案，并找到了一个名为react-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>
);}

在React Native中如何创建与附加图像相同的UI？

3 个答案: