与另一个视图重叠按钮

Question

我有一个屏幕，我在输入字段中输入一些值并相应地显示搜索结果（在<View style={styles.dropdown}> 内）。我希望列表应该与我的 ActionButton 重叠。就像它与我的其他输入字段重叠一样。

我已经添加了 zIndex，它适用于第二个输入字段，但不适用于按钮。

  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
        <View style={styles.searchFieldContainer}>
          <AddressSearchInput
            addressType="favouritePoint"
            iconName="search"
            textChangeHandler={textChangeHandler}/>
        </View>
        <View style={styles.dropdown}>
          <LocationsFound
            addressesFound={locations.addressesFoundList}/>
        </View>
        <View style={styles.fieldDescription}>
          <Text>Standortname:</Text>
        </View>
        <View style={styles.searchFieldContainer}>
          <Item style={styles.searchField}>
            <Input style={styles.searchText}/>
          </Item>
        </View>
        <View style={styles.buttonContainer}>
          <ActionButton buttonText="Platz Speichern"/>
        </View>
      </View>
    </SafeAreaView>
  );
};

export const styles = StyleSheet.create({
  searchFieldContainer: {
    alignItems: 'center',
    height: moderateScale(120),
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    zIndex: 1,
  },

  fieldDescription: {
    alignItems: 'center',
  },
  dropdown: {
    position: 'absolute',
    top: moderateScale(215),
    zIndex: moderateScale(10),
    backgroundColor: '#fff',
  },
  container: {
    height: '100%',
    backgroundColor: 'white',
    width: '100%',
    flex:1,
  },
});

Answer 1

您必须将样式添加到您的<View style={styles.container}>。喜欢：

container: {
  display:"flex",
  flex-direction:"column",
  //etc
} 

因为现在你的Views 都彼此分开了。