我如何使此输入反应本机可定制？

Question

我需要一个验证输入，并且想要像这张图片那样：

我知道怎么做，但不能定制。也许我想做 4 或 5。

我可以做成这样

const input2 = useRef();
const input3 = useRef();
const input4 = useRef();
const input5 = useRef();

<TextInput onChangeText={(e) => (setText(e), input2.focus() ) } />
<TextInput ref={(input) => { input2 = input } } />

但是它是硬编码的。我怎样才能使它可定制？

Answer 1

您可以使用高度可定制的 react-native-confirmation-code-field。

这是一个使用 4 inputs 而不是 5 的基本示例。事实上，您可以使用任意数量的输入。

const [value, setValue] = useState("")
  const ref = useBlurOnFulfill({ value, cellCount: 4 })
  const [props, getCellOnLayoutHandler] = useClearByFocusCell({
    value,
    setValue,
  })
  return (
     <SafeAreaView style={{ margin: 40, marginTop: 80 }}>
      <CodeField
        ref={ref}
        {...props}
        // Use `caretHidden={false}` when users can't paste a text value, because context menu doesn't appear
        value={value}
        onChangeText={setValue}
        cellCount={4}
        keyboardType="number-pad"
        textContentType="oneTimeCode"
        renderCell={({ index, symbol, isFocused }) => (
          <Text
            style={{
              width: 40,
              height: 40,
              lineHeight: 38,
              fontSize: 24,
              borderWidth: 2,
              borderColor: "#00000030",
              textAlign: "center",
            }}
            key={index}
            onLayout={getCellOnLayoutHandler(index)}>
            {symbol || (isFocused ? <Cursor /> : null)}
          </Text>
        )}
      />
    </SafeAreaView>

总的来说，这个组件是非常可定制的。可以渲染自己的输入组件等

以上代码产生以下非常简单的输出。设计与图片中给出的完全相同的组件归结为在 render 函数内设计自定义单元格。

我如何使此输入反应本机可定制？

How I make this input in react native customable?

react-native

expo