无法将组件包装在本机反应中

Question

所以我正在做一个

custom multiple select component

。当您单击 TextInput 时，将出现下拉列表（下拉列表中的项目来自 flatlist 组件），您可以从该下拉列表中搜索您想要 select 的项目，然后 selecting 标签将出现在输入字段旁边。这个 selected 标签也来自 flatlist

问题是，在我 select 3 个项目（将出现三个标签）和第 4 个项目之后，TextInput 应该进入新行。

index.js

const renderSelectView = (props) => {
return (
    <View style={styles.searchView}>
      {renderSelectionType(props)}
      {renderIcon(props)}
    </View>
}

const renderIcon = (props) => {
 return (
    <View>
          <Image
            source={require('images/right.png')}
            style={[styles.arrowIcon, {transform: [{rotate: '90deg'}]}]}
          />
    </View>
  );
}

const renderSelectionType =(props) => {
      return renderMultipleSearch(props);
}

const renderMultipleSearch =(props) => {
return (
    <View style={{flexDirection: 'row'}}>
      {renderTags(props)}
      {renderInputField(props)}
    </View>
  );
}

const renderTags =(props) => {
return multipleSelectedItem.length > 0 ? (
    <View>
      <FlatList
        data={multipleSelectedItem}
        keyExtractor={item => {
          return item.id;
        }}
        extraData={true}
        scrollEnabled={false}
        numColumns={3}
        horizontal={false}
        renderItem={({item}) => {
          return (
            <View style={styles.tagsView}>
              <Text style={styles.tagsText}>{item.value}</Text>
              <TouchableOpacity
                onPress={() => {
                  renderFilterList(
                    item.id,
                    item.value,
                    multipleSelectedItem,
                    setMultipleSelectedItem,
                  );
                }}>
                <Image
                  source={require('images/close.png')}
                  style={styles.closeIcon}
                />
              </TouchableOpacity>
            </View>
          );
        }}
      />
    </View>
  )
}

const renderInputField = (props) => {
 return (
    <View style={{flexShrink: 1, flexDirection: 'row'}}>
      <TextInput
        onChangeText={text => {
          handleSearch(text, setSearchQuery, data, setFilteredData);
        }}
        placeholder={selectedItem.value || null}
        placeholderTextColor={showState ? null : 'black'}
        onPressIn={() => {
          if (!showState) {
            setShowState(true);
          }
          setFilteredData(data);
        }}
        style={styles.renderInputField}
      />
    </View>
  );
}

Styles.js

import {StyleSheet, Dimensions} from 'react-native';

export default StyleSheet.create({
  searchView: {
    width: Dimensions.get('window').width - 40,
    marginVertical: 10,
    height: Dimensions.get('window').height - 790,
    borderRadius: 20,
    paddingLeft: 10,
    paddingVertical: 15,
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    overflow: 'hidden',
    justifyContent: 'space-between',
  },
  arrowIcon: {
    marginRight: 20,
  },
  dropdownView: {
    width: Dimensions.get('window').width - 40,
    backgroundColor: '#fff',
    height: 150,
  },
  dropdownItem: {
    marginTop: 10,
    height: 30,
    justifyContent: 'center',
    paddingLeft: 10,
    paddingRight: 10,
  },
  divider: {
    width: '99%',
    alignItems: 'center',
    height: 1,
    backgroundColor: 'grey',
    marginTop: 9,
  },
  tagsView: {
    alignSelf: 'flex-start',
    backgroundColor: 'grey',
    padding: 12,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 5,
  },
  tagsText: {
    color: 'red',
  },
  closeIcon: {
    height: 10,
    width: 10,
    marginLeft: 10,
  },
  selectedItem_Text_View: {
    flexDirection: 'row',
  },

  pickerText: {
    width: Dimensions.get('window').width - 100,
  },
});

因此，如果我 select 第 4 项

，我希望该 textinput 下降到另一行

Answer 1

您可以将 flexWrap : 'wrap' 属性添加到 renderMultipleSearch 函数的 View 组件中。这将允许 View 组件内的 TextInput 被正确地包裹到 View 的高度。

Answer 2

将 tagview 和 inputText 保持在同一个父级中

无法将组件包装在本机反应中

not able to wrap the components in reactnative

javascript

reactjs

react-native

react-native-flatlist

react-native-flexbox