Question

我想在native-base中使用自己的图标组。我读了这篇文章How to add custom Icons to NativeBase 没什么可显示的。这是我要使用的代码，在添加图标占位符后的第一个Item中删除

：

<View style={styles.view}>
            <Item floatingLabel style={{ width: w / 1.9, height: w / 7, borderColor: '#507783', marginBottom: 0, }} >
              <Icon><MyIcon name="ico_user" style={{ color: "#fff" }}/></Icon>
              <Input returnKeyType='next' autoCapitalize="none" onChangeText={text => setUsername(text)} style={{ paddingBottom: 0, color: '#fff', textAlign: 'left', fontFamily: 'IRANSansMobile', fontSize: 12, marginLeft: 8, }} placeholderTextColor="#507783" placeholder='نام کاربری' />
            </Item>
            <Item floatingLabel secureTextEntry={true} style={{ width: w / 1.9, height: w / 7, borderColor: '#507783' }} >
              <Icon type="Fontisto" name="locked" fontSize={25} style={{ color: "#fff" }} />
              <Input returnKeyType='next' autoCapitalize="none" onChangeText={text => setUsername(text)} style={{ color: '#fff', textAlign: 'left', fontFamily: 'IRANSansMobile', fontSize: 12, marginLeft: 8, }} placeholderTextColor="#507783" placeholder='رمز عبور' />
            </Item>
            <Button block style={{ width: w / 1.9, height: 40, backgroundColor: '#59c5b9', marginTop: 56 }} onPress={() => internet.isConnected ? _goLogin() : Alert.alert('لطفا اتصال به اینترنت خود را بررسی نمایید')}>
              <Text style={styles.btntext}>ورود</Text>
            </Button>

          </View>

这是我的icon-fon.js：

import {createIconSetFromFontello} from 'react-native-vector-icons';
import fontelloConfig from './ecfco.json';
const Icon = createIconSetFromFontello(fontelloConfig,'ecfco');
export default Icon;

，然后我以android：android/app/src/main/assets/fonts字体正确检查了此目录。并检查ios版本evry认为还可以，但无法正常工作。和基于本机的版本："native-base": "^2.13.12",

更新：在MyIcon之外使用Item时工作正常，但是在Input使用图标时什么也没显示感谢您帮助解决此问题。

Answer 1

我解决了。阅读有关gihub的文章：Trying to add an Image on the right of a Label. It's working fine with stackedlabel but floating label is making the image 改变我的方式，将Icon替换为Thumbnail并更正下面的代码：

<Item floatingLabel >
              <Thumbnail square source={require('../../assets/Newimage/Login/ico_user.png')} resizeMode='center' />
              <Label>نام کاربری</Label>
              <Input returnKeyType='next' autoCapitalize="none" onChangeText={text => setUsername(text)}  />
 </Item>

NativeBase中的自定义图标

1 个答案: