伙計們。
所以,我正在嘗試使用 React Native 制作一個簡單的選擇下拉選單。我還有另一個代碼也可以使用,但問題出在絕對位置內。我已經嘗試了很多次,但都沒有成功。
問題:
絕對視圖落后于螢屏的其他組件。
預期行為:
所有組件之上的絕對視圖
有人能幫我嗎?
這是我對這個問題的零食表示。
https://snack.expo.dev/@ellyssonmiike/shallow-croissant
謝謝你們
uj5u.com熱心網友回復:
您可以使用react-native-portalize
庫解決此問題。Portalize 基本上是在 Host 組件中渲染 Portal 的內容。
這是 Portalize 實作的要點:https ://snack.expo.dev/@truetiem/shallow-croissant
首先你需要安裝react-native-portalize
:
yarn add react-native-portalize
然后使用 Host 組件包裝您的應用程式:
import {Host} from 'react-native-portalize';
<Host>
// your app content
</Host>
并使用 Portal 組件包裝您的下拉串列:
import {Portal} from 'react-native-portalize';
<Portal>
<View style={[styles.dropdownMenu, { top: height }]}>
// your dropdown content
</View>
</Portal>
uj5u.com熱心網友回復:
您只需要對樣式表稍作重新安排,如下所示:
const styles = StyleSheet.create({
container: {
flex: 1,
zIndex: 10
},
dropdownContainer: {
position: 'absolute',
top: Constants.statusBarHeight,
zIndex:10,
backgroundColor: '#ccc',
width: '100%',
elevation: 10,
},
dropdownMenu: {
flex:1
}
});
您還可以洗掉 Item 樣式的 {{top: height}}。我認為沒有任何必要。
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/348744.html