如何在React Native中调整屏幕布局

Question

我正在设计一个“更改密码”屏幕。有三个文本输入字段，其中一个设计和调整正确，但另一个调整不正确。他们没有获得全屏宽度。附上代码供大家参考。

return (
    <View className='h-full w-full bg-white'>
      <Image className='h-full w-full absolute' source={require('../src/images/background.png')}/>
      
      {/* Lights */}
      <View className='flex-row justify-around w-full absolute'>
        <Animated.Image entering={FadeInUp.delay(200).duration(1000).springify().damping(2)} className='h-[225] w-[90]' source={require("../src/images/light.png")}/>
        <Animated.Image entering={FadeInUp.delay(400).duration(1000).springify().damping(2)} className='h-[160] w-[65]' source={require("../src/images/light.png")}/>
      </View>

      {/* Ttitle And Forms */}
      <View className='h-full w-full flex justify-around pt-40 pb-10'>
        {/* Ttitle */}
        <View className='flex items-center'>
            <Animated.Text entering={FadeInUp.duration(1500).springify()} className='text-white font-bold tracking-wider text-5xl'>Change Password</Animated.Text>
          </View>

          {/* first Input */}
          <View className='flex items-center mx-4 space-y-4'>
          <View className='bg-black/5 p-1 rounded-2xl w-full'>
          <TextInput
              placeholder="Email"
              value={email}
                onChangeText={(text) => setEmail(text)}
                />
                </View>
                {error ? (
        <Text style={{ color: 'red' }}>{error}</Text>
      ) : null}
      {!showPasswordInput ? (
        <TouchableOpacity className='bg-sky-300 w-full p-2 rounded-2xl' onPress={handleForgotPassword}>
          <Text className='text-white text-center'>Submit</Text>
        </TouchableOpacity>
      ) : (
        <View>
          <TextInput
            placeholder="New Password"
            value={password}
            onChangeText={(text) => setPassword(text)}
            secureTextEntry
          />
          <TextInput
            placeholder="Confirm New Password"
            value={confirmPassword}
            onChangeText={(text) => setConfirmPassword(text)}
            secureTextEntry
          />
          <Button title="Reset Password" onPress={handleResetPassword} />
        </View>
      )}
    </View>

          </View>
          </View>

      
      
      
  )  
};

Answer 1

您是否尝试将 className w-full 分配给密码字段容器的包装视图？例如

<View className='w-full'>
      <TextInput
        placeholder="New Password"
        value={password}
        onChangeText={(text) => setPassword(text)}
        secureTextEntry
      />
      <TextInput
        placeholder="Confirm New Password"
        value={confirmPassword}
        onChangeText={(text) => setConfirmPassword(text)}
        secureTextEntry
      />
      <Button title="Reset Password" onPress={handleResetPassword} />
 </View>