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

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

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

<BottomSheetModal
      ref={ref}         
      index={1}
      snapPoints={snapPoints}
      keyboardBehavior='interactive'
      handleIndicatorStyle={[s.handleStyle, s.handleColorWhite]}
      backdropComponent={BottomSheetBackdrop}
    >
        <View style={s.centered}>
          <Text style={s.title}>testtset</Text>
          <Text style={s.subtitle}>testtest</Text>
          <Text style={s.stepText}>{`Schritt ${step}/3`}</Text>
        </View>
 
       
                <Text style={[s.text, s.bold]}>Nur Buchstaben & Zahlen!</Text>
                <View style={s.content}>
                  <View style={s.inputContainer}>
                    <Input
                      placeholder='Name'
                      value={name}
                      onChangeText={handleChangeName}
                      style={[InputStyles.full_icon, Platform.OS === 'ios' && s.inputPaddingV]}
                      icon={<Ionicons name="md-newspaper-outline" size={24} style={s.icon} color="#333" />}
                      isBottomSheet={Platform.OS === 'ios' ? true : false}
                    />
                  </View>
                  <View style={s.containerInner}>
                    <Pressable onPress={handleChangeStage} style={[ButtonStyles.full]}>
                      <Text style={s.btnText}>Weiter zu 2</Text>
                    </Pressable>
                  </View>
                </View>

hl0ma9xz

hl0ma9xz1#

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

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

或直接在堆栈导航器中:

<Stack.Navigator
   initialRouteName={routeName}
   screenOptions={{
        cardStyle:{
          marginBottom: Platform.OS === 'ios' ? 24 : 0
        }
      }}>

相关问题