Icon.js:
import { createIconSet } from 'react-native-vector-icons'
import fontFile from '../../static/fonts/iconfont.ttf'
import iconfontJson from '../../static/fonts/iconfont.json'
const getIconOption = () => {
let glyphMap = {}
if (
iconfontJson &&
Array.isArray(iconfontJson.glyphs) &&
iconfontJson.glyphs.length > 0
) {
iconfontJson.glyphs.forEach((item) => {
glyphMap[item.font_class] = item.unicode_decimal
})
}
return {
glyphMap,
fontFamily: 'iconfont',
}
}
const { glyphMap, fontFamily } = getIconOption()
const Icon = createIconSet(glyphMap, fontFamily, fontFile)
export default function MyIcon(props) {
let { name, style, onPress } = props
return <Icon name={name} style={style} onPress={onPress}></Icon>
}
App.js:
import React, { useState, useRef, useEffect } from 'react'
import { View, TextInput, Text, Button } from 'react-native'
import style from './src/static/style/index.js'
import Api from './src/api'
import { Icon } from './src/component/light'
export default function App() {
const [username, setUsername] = useState('admin')
const [password, setPasswork] = useState('123456')
const [visible, setVisible] = useState(false)
const usernameEl = useRef(null)
const handleInput = (e) => {
console.log(e)
setUsername(e)
}
const handleLogin = () => {
console.log(777, username, password)
Api.light.getUserInfo().then((res) => {
console.log(res)
})
Api.light.login({ username, password }).then((res) => {
console.log(res)
})
}
const handleVisilbe = () => {
setVisible(!visible)
}
useEffect(() => {
//usernameEl.current.focus()
//console.log(666, usernameEl.current.isFocused())
}, [])
return (
<View style={style.mLoginWrap}>
<View style={style.mLoginRow}>
<TextInput
style={style.mLoginInput}
value={username}
onChangeText={handleInput}
// autoFocus
ref={usernameEl}
></TextInput>
</View>
<View style={style.mLoginRow}>
<TextInput
style={style.mLoginInput}
value={password}
onChangeText={setPasswork}
secureTextEntry={!visible}
></TextInput>
<Icon
name={visible ? 'show' : 'close'}
size={40}
color="#333"
onPress={handleVisilbe}
style={style.mLoginPasswordIcon}
></Icon>
</View>
<View style={style.mLoginRow}>
<Button onPress={handleLogin} title="登录"></Button>
</View>
</View>
)
}
style/index.js:
import { StyleSheet } from 'react-native'
const style = StyleSheet.create({
mLoginWrap: {flex: 1,marginTop: 80,},
mLoginRow: {position: 'relative', marginBottom: 10,paddingLeft: 10,paddingRight: 10,},
mLoginInput: {borderColor: '#333',borderStyle: 'solid',borderWidth: 2,paddingLeft: 10,paddingTop: 4,paddingBottom: 4,borderRadius: 5},
mLoginPasswordIcon: {position: 'absolute', top: 8, right: 20, color: '#333', fontSize: 30}
})
export default style
fonts文件夹里的字体文件是下载的。
https://www.iconfont.cn/