在React Native中为gorhom底部表单显示阴影。
P粉148434742
P粉148434742 2023-07-27 23:12:57
0
1
532
<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>
P粉148434742
P粉148434742

全部回复(1)
P粉311089279

是的,这是可能的。你需要使用这个库来为任何组件添加阴影效果。

Click this link for library

如果有任何需要帮助的地方,请告诉我!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板