Question

在我的应用程序中，我希望在带有浮动样式标签设计的表单输入字段中使用

我测试了一些具有此类字段的库，我更好地考虑了NativeBase.io，但在此我发现无法放置掩码内容，也没有其他库中的任何一个。

那么，有没有办法将内容掩码放在这个字段中？或者是否有一个库允许我创建一个带有浮动标签样式设计和内容掩码的输入？

如果输入是在html中，我想要做的是这样的事情，但在React-native中它不起作用

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
  Alert
} from 'react-native';
import { 
  Text, 
  Form, 
  Item, 
  Label, 
  Input 
} from 'native-base';

export default class Example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Form style={{ width: 340 }}>
          <Item floatingLabel>
            <Label>Tel</Label>
            <Input data-mask="(00) 0000-0000" data-mask-selectionfocus="true" />
          </Item>
        </Form>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
});

我试图附加一个库的字段，该字段允许在floatingLabel中创建带掩码的字段，但没有成功

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  StatusBar,
  Alert
} from 'react-native';
import { 
  Text, 
  Form, 
  Item, 
  Label, 
  Input 
} from 'native-base';
import TextInputMask from 'react-native-text-input-mask';

export default class Example extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Form style={{ width: 340 }}>
          <Item floatingLabel>
            <Label>Tel</Label>
            <TextInputMask
              refInput={ref => { this.input = ref }}
              onChangeText={(formatted, extracted) => {
                console.log(formatted) // +1 (123) 456-78-90
                console.log(extracted) // 1234567890
              }}
              mask={"+1 ([000]) [000] [00] [00]"}
            />
          </Item>
        </Form>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
});

snack TextInputMask库存在一些问题但它不起作用，但它在本地独立工作：

具有浮动标签设计和掩码的输入字段

0 个答案: