示例代码
在React Native输入框TextInput需要配置textContentType属性来支持智能填充，代码如下：
import React from 'react';
import { Text, TextInput, View, StyleSheet } from 'react-native';
const styles = StyleSheet.create({
default: {
borderWidth: StyleSheet.hairlineWidth,
borderColor: '#0f0f0f',
flex: 1,
fontSize: 13,
padding: 4,
height: 80,
width: 160,
},
labelContainer: {
flexDirection: 'row',
marginVertical: 2,
},
label: {
width: 140,
textAlign: 'right',
marginRight: 10,
paddingTop: 2,
fontSize: 15,
},
inputContainer: {
flex: 1,
}
});
class WithLabel extends React.Component<$FlowFixMeProps> {
render(): React.Node {
return (
<View style={styles.labelContainer}>
<Text style={styles.label}>{this.props.label}</Text>
<View style={styles.inputContainer}>{this.props.children}</View>
</View>
);
}
}
const RNTesterApp = () : React.ReactNode=> {
return (
<View style={{width: '100%', height: '100%', paddingTop: 40}}>
<WithLabel label="昵称">
<TextInput textContentType="nickname" style={styles.default} />
</WithLabel>
<WithLabel label="姓名">
<TextInput textContentType="name" style={styles.default} />
</WithLabel>
<WithLabel label="手机号">
<TextInput textContentType="telephoneNumber" style={styles.default} />
</WithLabel>
<WithLabel label="邮件">
<TextInput textContentType="emailAddress" style={styles.default} />
</WithLabel>
<WithLabel label="身份证号">
<TextInput textContentType="idCardNumber" style={styles.default} />
</WithLabel>
<WithLabel label="全部地址">
<TextInput textContentType="formatAddress" style={styles.default} />
</WithLabel>
<WithLabel label="带街道的详细地址">
<TextInput textContentType="fullStreetAddress" style={styles.default} />
</WithLabel>
<WithLabel label="不带街道的详细地址">
<TextInput textContentType="detailInfoWithoutStreet" style={styles.default} />
</WithLabel>
</View>
);
};
export default RNTesterApp; React Native框架中加载的H5页面效果图
React Native框架加载H5页面场景，通过给form表单的input输入框（form表单的子节点）配置autocomplete属性来支持智能填充，代码如下：
import React,{ useEffect } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';
// ...
const RNTesterAppH5 = () : React.ReactNode => {
// ...
return (
// ...
<View style={{width: '100%', height: '100%', paddingTop: 40}}>
<WebView
source={require('./autofill_h5.html')}
style={{flex: 1, paddingTop: 50}}
/>
</View>
// ...
);
};
export default RNTesterAppH5; autofill_h5.html实现参考示例代码二。