如何解决React Native / react-native-reanimated-bottom-sheet /如何更改表格后面视图的背景颜色?
在演示中,最后两个示例具有深色背景,但是我没有看到将其从透明更改为深色的方法,并且在源代码中没有看到与样式或颜色相关的任何内容。有什么建议吗?
解决方法
// Step 1: Import Libraries
import React from "react";
import { View,Text,Button,StyleSheet } from "react-native";
import Animated from "react-native-reanimated";
import BottomSheet from "reanimated-bottom-sheet";
export const BottomSheetMask: React.FC = () => {
// Step 2: Add The Following Lines In Your Component
const sheetRef = useRef < BottomSheet > null;
let fall = new Animated.Value(1);
const animatedShadowOpacity = Animated.interpolate(fall,{
inputRange: [0,1],outputRange: [0.5,0],});
return (
<View style={{ flex: 1,justifyContent: "center",alignItems: "center" }}>
<Text>Hello React Native!</Text>
<Button onPress={() => sheetRef.current?.snapTo(0)}>
Open Bottom Sheet
</Button>
// Bottom Sheet Component
<BottomSheet
ref={sheetRef}
callbackNode={fall} // Add ** fall ** Variable here.
snapPoints={[700,300,0]}
initialSnap={2}
renderHeader={() => {
// Your Header Component
}}
renderContent={() => {
// Your Content Component
}}
/>
// Step 3: Add The Following Code Inside Your Component
<Animated.View
pointerEvents="none"
style={[
{
...StyleSheet.absoluteFillObject,backgroundColor: "#000",opacity: animatedShadowOpacity,},]}
/>
</View>
);
};
请尝试以下步骤。
,您应该使用以下代码包装代码:
<Animated.View
style={{
opacity: Animated.add(0.1,Animated.multiply(fall,1.0)),flex: 1,}}>
<Animated.View/>
注意:底部View
除外。
您可以使用react-native-bottomsheet-reanimated软件包,因为该软件包具有backdrop
功能
yarn add react-native-bottomsheet-reanimated
您必须使用isBackDrop={true}
和backDropColor="#eee"
来更改底部工作表的背景颜色,例如
import BottomSheet from 'react-native-bottomsheet-reanimated';
class Example extends React.Component {
render() {
return (
<View style={styles.container}>
<BottomSheet
bottomSheerColor="#FFFFFF"
ref="BottomSheet"
initialPosition={'50%'}
snapPoints={['50%','100%']}
isBackDrop={true}
isBackDropDismissByPress={true}
backDropColor="red" //======> this prop will change color of backdrop
header={
<View>
<Text style={styles.text}>Header</Text>
</View>
}
body={
<View style={styles.body}>
<Text style={styles.text}>Body</Text>
</View>
}
/>
</View>
);
}
}
,
<BottomSheet initialSnapIndex={0} snapPoints={snapPoints}>
<BottomSheetScrollView style={{backgroundColor: '#341f97'}}>
<View>
<Text>test</Text>
</View>
</BottomSheetScrollView>
</BottomSheet>
给BottomSheetScrollView赋予Backgroundcolor来改变Bottom Sheet的背景色
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。