在React Native中为gorhom底部表单显示阴影。
P粉148434742
2023-07-27 23:12:57
<p>我正在使用gorhom/react-native-bottom-sheet库。我想在用户向上或向下滑动底部表单时显示阴影框。如何实现这一点?是否可能?目前我已经设置在isOpen时显示,但我希望在滑动时显示。我还尝试将其包装在一个Touchable组件中,当isPressed为true时显示阴影框,但在移动底部表单时它并没有起作用。</p>
<pre class="brush:php;toolbar:false;">export default function BottomSheet() {
const [isPressed, setIsPressed] = useState(false);
const { t } = useTranslation();
const [isOpen, setIsOpen] = useState(false);
const bottomSheetModalRef = useRef(null);
const snapPoints = ["50%"];
function handlePresentModal() {
bottomSheetModalRef.current?.present();
setTimeout(() => {
setIsOpen(true);
}, 100);
}
return (
<>
<Button title="Present Modal" onPress={handlePresentModal} />
<BottomSheetModalProvider>
<StatusBar style="auto" />
<BottomSheetModal
ref={bottomSheetModalRef}
index={0}
snapPoints={snapPoints}
handleComponent={CustomHandler}
onDismiss={() => setIsOpen(false)}
>
<Spacer size={30} />
<BottomSheetScrollView contentContainerStyle={styles.contentContainer}>
//Content here
</BottomSheetScrollView>
</BottomSheetModal>
</BottomSheetModalProvider>
{isOpen && <ShadowBox />}
</>
);
}
const styles = StyleSheet.create({
contentContainer: {
paddingHorizontal: 16,
paddingBottom: 100,
},
});</pre>
<p><br /></p>
是的,这是可能的。你需要使用这个库来为任何组件添加阴影效果。
Click this link for library
如果有任何需要帮助的地方,请告诉我!