本机基础中的多个输入

Question

我在react native中有一个项目，并使用“ native-base”。我想输入像这样的

有人可以帮忙吗？

Answer 1

NativeBase可以做到这一点，只需将您选择的宽度指定给Item

此屏幕截图中提到的输入是每个输入给定的宽度值

Answer 2

可能对您的要求有所帮助

import React, { Component } from "react";
import { Container, Header, Content, Item, Input } from "native-base";
export default class RoundedTextboxExample extends Component {
render() {
return (
  <Container>
    <Header />
    <Content
      contentContainerStyle={{
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 20,
        borderColor: "black",
        borderWidth: 3,
        margin: 2,
        padding: 20
      }}
    >
      <Item rounded style={{ width: "23%", borderColor: "red" }}>
        <Input placeholder="Rounded" />
      </Item>
      <Item rounded style={{ width: "23%" }}>
        <Input placeholder="Rounded" />
      </Item>
      <Item rounded style={{ width: "23%" }}>
        <Input placeholder="Rounded" />
      </Item>
      <Item rounded style={{ width: "23%" }}>
        <Input placeholder="Rounded" />
      </Item>
    </Content>
  </Container>
);
}
}

Answer 3

如果您愿意使用本机以外的其他方式，请选择react-native-code-input