React Native iOS上的问题,不好看的底部,因为指标如何修复?

xqkwcwgp  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(113)

我如何解决这个问题?我的模态或每个屏幕看起来像这样,因为在底部的指示器。我不想现在设置在每个屏幕上的边距或填补它的时间消耗。有更好的解决方案来解决这个问题吗?
密码:

  1. <BottomSheetModal
  2. ref={ref}
  3. index={1}
  4. snapPoints={snapPoints}
  5. keyboardBehavior='interactive'
  6. handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
  7. backdropComponent={BottomSheetBackdrop}
  8. >
  9. <View style={s.centered}>
  10. <Text style={s.title}>testtset</Text>
  11. <Text style={s.subtitle}>testtest</Text>
  12. <Text style={s.stepText}>{`Schritt ${step}/3`}</Text>
  13. </View>
  14. <Text style={[s.text, s.bold]}>Nur Buchstaben & Zahlen!</Text>
  15. <View style={s.content}>
  16. <View style={s.inputContainer}>
  17. <Input
  18. placeholder='Name'
  19. value={name}
  20. onChangeText={handleChangeName}
  21. style={[InputStyles.full_icon, Platform.OS === 'ios' && s.inputPaddingV]}
  22. icon={<Ionicons name="md-newspaper-outline" size={24} style={s.icon} color="#333" />}
  23. isBottomSheet={Platform.OS === 'ios' ? true : false}
  24. />
  25. </View>
  26. <View style={s.containerInner}>
  27. <Pressable onPress={handleChangeStage} style={[ButtonStyles.full]}>
  28. <Text style={s.btnText}>Weiter zu 2</Text>
  29. </Pressable>
  30. </View>
  31. </View>

hl0ma9xz

hl0ma9xz1#

您可以在堆叠屏幕中添加边距:

  1. <Stack.Screen name="YourScreenName" component={YourComponent} options={{
  2. cardStyle:{
  3. marginBottom: Platform.OS === 'ios' ? 24 : 0
  4. }
  5. }} />

或直接在堆栈导航器中:

  1. <Stack.Navigator
  2. initialRouteName={routeName}
  3. screenOptions={{
  4. cardStyle:{
  5. marginBottom: Platform.OS === 'ios' ? 24 : 0
  6. }
  7. }}>

相关问题