Question

我曾尝试使用 react-native-otp-inputs 插件创建具有自动填充功能的 OTP 屏幕。一切正常，但是当我尝试在此 OTPInputs 组件下方添加任何按钮时，按钮的背景颜色变为灰色。

import React, {useEffect, useState, useRef, useCallback} from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';
import OtpInputs from 'react-native-otp-inputs';

export function AuthenticationScreen({navigation}) {
  useEffect(() => {
    RNBootSplash.hide({duration: 250});
  });

  const otpRef = useRef();

  const focusOTP = useCallback(() => {
    otpRef.current.focus();
  }, []);

  const resetOTP = useCallback(() => {
    otpRef.current.reset();
  }, []);

  return (
    <View style={{backgroundColor: 'white', flex: 1}}>
      <OtpInputs
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          width: '100%',
          paddingLeft: 30,
          paddingRight: 30,
          borderWidth: 1,
          borderColor: 'blue',
        }}
        inputContainerStyles={{
          borderWidth: 0,
          borderBottomWidth: 1,
          borderColor: 'black',
        }}
        inputStyles={{textAlign: 'center'}}
        handleChange={(code) => console.log(code)}
        numberOfInputs={6}
      />

      <View
        style={{
          justifyContent: 'center',
          alignItems: 'center',
          marginVertical: 40,
          borderWidth: 1,
          borderColor: 'red',
        }}>
        <TouchableOpacity
          style={{
            height: 50,
            width: 100,
            borderRadius: 20,
            justifyContent: 'center',
            alignItems: 'center',
          }}>
          <Text>Continue</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

只有当所有 otp 字段都被填充时才会发生这种情况。请找到所附屏幕截图以获取详细视图。

如您所见，我没有为可触摸不透明度添加任何背景颜色，但在填充 otp 输入后，它仍然显示为灰色。这可能是什么原因？

Answer 1

显然，当您结束编辑 OTP 字段时，它会更改下一个可触摸的不透明度。

作为解决方法，您可以像这样添加没有宽度和高度的自封闭可触摸不透明度

<TouchableOpacity/>

这里有一个完整的 example 和您的代码

按钮背景颜色变化

1 个答案: