React Native Searchable Dropdown:文本保持不可见 [英] React Native Searchable Dropdown: Text remains Invisible

问题描述

我正在使用 react-native-searchable-dropdown 来搜索数据列表并选择它们.这是我正在关注的工作示例.

I am using react-native-searchable-dropdown to search a list of data and select them. This is the working example that I am following.

但是，当我使用不同的 API URL 时，我面临以下问题问题:

However, when I use a different API URL, I am facing the following problems:

1. 项目本身仍然不可见
2. 尝试搜索该项目显示错误

这是我使用不同 API URL 的代码.在我的另一个项目中，使用 setSort 属性帮助解决了搜索问题，但在本例中，它显示错误.

This is my code with different API URL. On another one of my project, using setSort property helped solved the searching issue but in this example, it's showing error.

如果以前有过此问题经验的人可以帮助解决它，那将非常有帮助.谢谢.

It would be really helpful if anyone with previous experience regarding this issue can help solve it. Thank you.

这是我的代码中的代码片段:

    componentDidMount() {
        fetch('https://facebook.github.io/react-native/movies.json')
          .then(response => response.json())
          .then(responseJson => {
            //Successful response from the API Call
            this.setState({
              serverData: [...this.state.serverData, ...responseJson.movies],
              //adding the new data in Data Source of the SearchableDropdown
            });
          })
          .catch(error => {
            console.error(error);
          });
      }
      render() {
        return (
          <View style={{ flex: 1, marginTop: 30 }}>
            <Text style={{ marginLeft: 10 }}>
              Searchable Dropdown from Dynamic Array from Server
            </Text>
            <SearchableDropdown
              setSort={(item, searchedText)=> item.title.toLowerCase().startsWith(searchedText.toLowerCase())}
              onTextChange={text => console.log(text)}
              //On text change listner on the searchable input
              onItemSelect={item => alert(JSON.stringify(item))}
              //onItemSelect called after the selection from the dropdown
              containerStyle={{ padding: 5 }}
              //suggestion container style
              textInputStyle={{
                //inserted text style
                padding: 12,
                borderWidth: 1,
                borderColor: '#ccc',
                backgroundColor: '#FAF7F6',
              }}
              itemStyle={{
                //single dropdown item style
                padding: 10,
                marginTop: 2,
                backgroundColor: '#FAF9F8',
                borderColor: '#bbb',
                borderWidth: 1,
              }}
              itemTextStyle={{
                //single dropdown item's text style
                color: '#222',
              }}
              itemsContainerStyle={{
                //items container style you can pass maxHeight
                //to restrict the items dropdown hieght
                maxHeight: '50%',
              }}
              items={this.state.serverData}
              //mapping of item array
              defaultIndex={2}
              //default selected item index
              placeholder="placeholder"
              //place holder for the search input
              resetValue={false}
              //reset textInput Value with true and false state
              underlineColorAndroid="transparent"
              //To remove the underline from the android input
            />
          </View>
        );
      }

推荐答案

此解决方法需要修改模块.setSort 函数允许您纠正搜索错误.但是，您无法在搜索列表中看到该名称.默认情况下，名称中键的值必须是'name'.

This workaround requires the module to be modified. The setSort function allows you to correct errors for the search. However, you cannot see the name in the search list. By default, the value of the key in the name must be 'name'.

可以在返回列表的地方找到原因.

The reason can be found where the list is returned.

react-native-searchable-dropdown 中的 index.js

renderItems = (item, index) => {
....
            <View style={{ flex: 0.9, flexDirection: 'row', alignItems: 'flex-start' }}>
              <Text>{ item.name }</Text>  <== The value of the list key is name.
            </View>
....

如果你现在想解决问题，API的key值必须要改

If you want to solve the problem right now, the key value of the API must be changed

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "name": "Star Wars", "releaseYear": "1977" },
    { "id": "2", "name": "Back to the Future", "releaseYear": "1985" },
    { "id": "3", "name": "The Matrix", "releaseYear": "1999" },
    { "id": "4", "name": "Inception", "releaseYear": "2010" },
    { "id": "5", "name": "Interstellar", "releaseYear": "2014" }
  ]
}

您还可以通过添加电影类型来转换搜索.

You can also convert your search by adding a movie genre.

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "genre": "Fantasy", "name": "Star Wars", "releaseYear": "1977" },
    { "id": "2", "genre": "Fantasy", "name": "Back to the Future", "releaseYear": "1985" },
    { "id": "3", "genre": "Action", "name": "The Matrix", "releaseYear": "1999" },
    { "id": "4", "genre": "Future", "name": "Inception", "releaseYear": "2010" },
    { "id": "5", "genre": "Future", "name": "Interstellar", "releaseYear": "2014" }
  ]
}

你可以使用setSort函数

And You can use setSort function

setSort={(item, searchedText)=> item.genre.toLowerCase().startsWith(searchedText.toLowerCase())}

这篇关于React Native Searchable Dropdown:文本保持不可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！