React Native使用react-native-vector-icons和iconFont做字体图标

 

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/