希望图片能很好地说明问题!我正在尝试使用InstantSearch(由Algolia提供支持),并且我正在使用react-native-swipe-list-view向右滑动以删除功能。很抱歉颜色古怪,只需要弄清楚哪些组件占用了空间。我一直在设置 overflow: "visible" 像疯了一样,我还调整了海拔和 zIndex 无济于事。文本建议仍然被切断。
这是一些代码:
成分DetailContainer.js:
const IngredientDetailContainer = (props) => {
const [name, setName] = useState('');
const [objectId, setObjectId] = useState('');
return (
<View style={{ elevation:0, zIndex:0, flex: 1.5, flexDirection: 'row', width: '100%', justifyContent: 'center', backgroundColor: 'red', overflow:'hidden' }}>
<DragIcon />
<View style={[{ flex: 0.05}]} />
{ Platform.OS === "ios" ?
(
<InstantSearch searchClient={searchClient} indexName={ALGOLIA_INDEX_NAME}>
<Autofill setName={setName} setObjectId={setObjectId} defaultQuery={''} editing={false} />
</InstantSearch>
)
: (
<View style={[styles.input, { backgroundColor:'green', overflow:'visible', marginTop:'10%', flex: 0.9, fontSize: 13, color: 'gray', fontWeight: 'bold', textAlign: 'center', borderWidth: 2, borderRadius: 20, borderColor: '#D0DBEA', overflow: 'visible', borderStyle: 'solid' }]}>
<InstantSearch style={[{overflow:'visible', elevation:5, position:'absolute'}]} searchClient={searchClient} indexName={ALGOLIA_INDEX_NAME}>
<View style={[styles.autocompleteContainer, {backgroundColor:'orange', overflow:'visible', marginTop:'-20%', position:'absolute', elevation:15, zIndex: 15}]}>
<Autofill style={[{backgroundColor:'black', overflow:'visible', position:'absolute'}]} setName={setName} setObjectId={setObjectId} defaultQuery={''} editing={false} />
</View>
</InstantSearch>
</View>
)
}
...
recipeCreation2.js:
const renderItem = data => (
<IngredientDetailContainer style={[{overflow:'visible'}]} unitOnPress={TriggerModal} />
);
...
var IngredientList = (props) => (
<SwipeListView
data={listData}
renderItem={renderItem}
renderHiddenItem={renderHiddenItem}
previewOpenValue={-40}
previewOpenDelay={3000}
leftOpenValue={75}
onRowDidOpen={onRowDidOpen}
/>
任何关于如何克服这一点的想法将不胜感激!