[英]React Native Android - Why is absolute positioned view outside of parent component bounds cannot be interacted with?
I am trying to implement an autocomplete input that has a scrollview below the text input when the user starts typing which contains rows of suggestions that can be pressed.我正在尝试实现一个自动完成输入,当用户开始输入时,它在文本输入下方有一个滚动视图,其中包含可以按下的建议行。 The problem only occurs on Android wherein the component below the text input which has an absolute positioning cannot be pressed or scrolled since it is outside the parent container.
该问题仅发生在 Android 上,其中具有绝对定位的文本输入下方的组件无法按下或滚动,因为它位于父容器之外。 What is the best work around on this?
在这方面最好的工作是什么? I already tried changing zIndex of the parent container and also the scroll view, but it still doesn't work.
我已经尝试更改父容器的 zIndex 以及滚动视图,但它仍然不起作用。
Here is a snack code url if you guys wanna test: snack.expo.io/HkLeBYV18如果你们想测试,这里有一个小吃代码网址: snack.expo.io/HkLeBYV18
Here is a screenshot of what I am trying to implement, the one circled with red cannot be press or anything on Android:这是我尝试实现的屏幕截图,用红色圈出的那个不能在 Android 上按下或任何东西:
You can use a portal to move autocomplete view to root component.您可以使用门户将自动完成视图移动到根组件。 To use portals on react native you need install
react-native-portal
package.要在 React Native 上使用门户,您需要安装
react-native-portal
包。 I have modified your code on snack to include react-native-portal
我已经修改了您的零食代码以包含
react-native-portal
Are you open to using the custom dropdowns like您是否愿意使用自定义下拉菜单,例如
https://github.com/sohobloo/react-native-modal-dropdown
https://github.com/maxkordiyak/react-native-dropdown-autocomplete#readme
https://github.com/sohobloo/react-native-modal-dropdown
https://github.com/maxkordiyak/react-native-dropdown-autocomplete#readme
Please check these libraries if you can use.如果可以使用,请检查这些库。
I have resolved your issue of pressed or scrolled searching data inside Scrollview
, by adding isHideScroll
state into onPress
listener.通过将
isHideScroll
状态添加到onPress
侦听Scrollview
,我已经解决了您在Scrollview
中按下或滚动搜索数据的问题。 isHideScroll
Flag is used to show and hide Scrollview conditionally. isHideScroll
Flag 用于有条件地显示和隐藏 Scrollview。 Please check following expo snack code:-请检查以下世博小吃代码:-
https://snack.expo.io/@vishal7008/scroll-and-press-issue https://snack.expo.io/@vishal7008/scroll-and-press-issue
But it is not the best approach to doing search data from list但这不是从列表中搜索数据的最佳方法
You need to add FlatList
in place of ScrollView
and search data using filter
function.您需要添加
FlatList
代替ScrollView
并使用filter
功能搜索数据。 Please check the below added example code and expo snack link.请检查下面添加的示例代码和博览会小吃链接。
https://snack.expo.io/@vishal7008/searching-list https://snack.expo.io/@vishal7008/searching-list
import * as React from 'react';
import {
Text,
View,
FlatList,
StyleSheet,
TextInput,
TouchableOpacity,
} from 'react-native';
// or any pure javascript modules available in npm
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isHideList: true,
searchText: '',
listData: [
{name: 'Bread'},
{name: 'Cookies'},
{name: 'Biscuit'},
{name: 'Chocolate'},
],
localData: [
{name: 'Bread'},
{name: 'Cookies'},
{name: 'Biscuit'},
{name: 'Chocolate'},
],
};
}
selectOnClick = () => {
this.setState({isHideList:false})
};
_renderListView = ({item, index}) => {
return (
<View style={styles.listItemView}>
<TouchableOpacity onPress={() => this.selectOnClick()}>
<Text allowFontScaling={false} style={styles.listText}>
{item.name}
</Text>
</TouchableOpacity>
</View>
);
};
_searchFoodItem = value => {
const newData = this.state.localData.filter(function(item) {
let itemData = item.name.toUpperCase();
let textData = value.toUpperCase();
return itemData.startsWith(textData);
});
if (value == '') {
this.setState({
isHideList: false,
});
} else {
this.setState({
isHideList: true,
});
}
this.setState({
listData: [...newData],
});
};
render() {
return (
<View>
<View style={styles.selectedTagsContainer}>
<TextInput
style={styles.searchInput}
placeholderTextColor="#9B6B6B"
placeholder="Select 3 tags"
onChangeText={text => {
this._searchFoodItem(text);
}}
/>
</View>
{this.state.isHideList && (
<View style={styles.listStyle}>
<FlatList
nestedScrollEnabled={true}
data={this.state.listData}
keyExtractor={(item, index) => index.toString()}
renderItem={(item, index) =>
this._renderListView(item, index)
}
bounces={false}
keyboardShouldPersistTaps="handled"
alwaysBounceVertical={false}
/>
</View>
)}
</View>
);
}
}
const styles = StyleSheet.create({
listStyle: {
flex: 1,
flexDirection: 'row',
backgroundColor: '#ffffff',
borderRadius: 2,
position: 'absolute',
width: '60%',
zIndex: 1,
marginLeft: 25,
marginTop: 104,
maxHeight:150,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
selectedTagsContainer: {
flexDirection: 'column',
flexWrap: 'wrap',
marginLeft: 20,
marginRight: 20,
marginTop: 50,
backgroundColor: '#F3F3F3',
borderRadius: 10,
alignItems: 'center',
},
listText: {
padding: 10,
width: '100%',
color: 'black',
marginTop: 7,
},
listItemView: {
flex: 1,
paddingLeft: 10,
},
searchInput: {
width: '100%',
height: 50,
paddingHorizontal: 20,
color: '#6B6B6B',
fontSize: 10,
},
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.