英文:
How to center @gorhom/bottom-sheet with not 100% width?
问题
I am using https://gorhom.github.io/react-native-bottom-sheet/ library and I do not want the BottomSheet to take full width of the screen. So I limit it as
<BottomSheet snapPoints={snapPoints} style={{width: '80%'}}>
...
</BottomSheet>
and try to center it as justifyContent: 'center' in View wrapping the BottomSheet. However, it does not work as expected.
So the question is: how do I reduce the width of the BottomSheet and center it?
英文:
I am using https://gorhom.github.io/react-native-bottom-sheet/ library and I do not want the BottomSheet to take full width of the screen. So I limit it as
<BottomSheet snapPoints={snapPoints} style={{width: '80%'}}>
...
</BottomSheet>
and try to center it as justifyContent: 'center' in View wrapping the BottomSheet. However, it does not work as expected.
So the question is: how do I reduce the width of the BottomSheet and center it?
答案1
得分: 1
有一个快速的解决方法：
import { Dimensions, ... } from "react-native";
...
<BottomSheet
snapPoints={snapPoints}
style={{ marginHorizontal: Dimensions.get("screen").width * 0.1 }}
>
...
</BottomSheet>
它的作用是：计算两侧（右侧和左侧）的边距：每侧应该有10%的边距（总宽度为80%）。
希望对您有所帮助！ 
英文:
There is a quick workaround:
import {Dimensions, ...} from "react-native";
...
<BottomSheet
snapPoints={snapPoints}
style={{marginHorizontal: Dimensions.get("screen").width*0.1}}
>
...
</BottomSheet>
What it does: It calculates the margin to both sides (right and left): There should be 10% margin to each side (in total a width of 80%).
Hope that helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论