Question

我正在尝试实现react-native-google-places-autocomplete模块，但以下codebit不会在列表视图中生成任何结果。我在包中放置了断点和控制台日志，发现请求成功并且API返回值，但是没有任何位置在列表视图中填充。我还附上了屏幕截图来显示我的问题。

- ＆GT;

.empty()

Answer 1

Listview似乎隐藏在所有其他观点之后。

styles={{
          description: {
                        fontWeight: 'bold',
                       },
          predefinedPlacesDescription: {
                          color: '#1faadb',
                       },
          listView: { color: 'black', //To see where exactly the list is
                      zIndex: 16, //To popover the component outwards
                      position: 'absolute',   
       }}

Answer 2

用这种方式。我想这可能适用于您的代码。

   render() {
        return (
            <View style={styles.searchBox}>
                <GooglePlacesAutocomplete
                    placeholder='Where to Go'
                    minLength={2} // minimum length of text to search
                    autoFocus={false}
                    returnKeyType={'search'} 
                    renderDescription={(row) => row.description} // custom description render

                    styles={searchInputStyle}

                />

            </View>
        );
    }
}

const searchInputStyle={
        container: {
            backgroundColor: '#fff',
            width: width,
            marginLeft: 20,
            marginRight: 20,
            marginTop: 20,
            marginBottom: 0,
            opacity: 0.9,
            borderRadius: 8
        },
        description: {
            fontWeight: 'bold',
            color: "#007",
            borderTopWidth: 0,
            borderBottomWidth: 0,
            opacity: 0.9,
        },
        predefinedPlacesDescription: {
            color: '#355',
        },
        textInputContainer: {
            height: 50,

        },
            textInput: {
            height: 33,
            fontSize: 16
        }
    }

const styles = StyleSheet.create({
    searchBox: {
        top: 0,
        position: "absolute",
        flex: 1,
        justifyContent: 'center',
    }
 });

Answer 3

实际上，您的帐单信息在Google上是必需的。因此，请添加并享受自动填充文本框。

https://console.cloud.google.com/home/dashboard?project=fblog-1534417095749

Answer 4

使用此。它将消除警告，并且您的代码将正常运行。

   <ScrollView keyboardShouldPersistTaps={'handled'}>
      <GooglePlacesAutocomplete...../>
   </ScrollView>

Answer 5

只需将组件包裹在一个 ScrollView 中，你就会看到搜索结果

React Native react-native-google-places-autocomplete实现

5 个答案: