Native Base / React Native 表单标签图标被截断答案

【问题标题】：Native Base / React Native form label icon cut offNative Base / React Native 表单标签图标被截断
【发布时间】：2018-03-27 20:11:46
【问题描述】：

我正在使用 React Native 和 Native Base 以及 react-native-vector-icons 开发一个移动应用程序。我试图在我的登录表单中添加一些内联标签图标，但由于某种原因，它们一直在右侧被截断。

我已经尝试从项目、图标和输入中删除填充，但图标仍然被切断。然后我去更改图标本身的字体大小，但仍然没有任何效果。

有谁知道这是为什么造成的。我已经上传了我的屏幕图像和它的代码。对此问题的任何帮助将不胜感激。这是我在我的 Android LG V30+App Screenshot 上模拟的应用的图片

 import React, { Component } from "react";
import { Image, View, ImageBackground } from "react-native";
import {
Container,
Header,
Title,
Body,
Content,
Thumbnail,
Card,
CardItem,
Footer,
FooterTab,
Button,
Left,
Right,
Icon,
Form,
Item,
Input,
Text,
InputGroup,
List,
ListItem
} from "native-base";

class LoginScreen extends Component {
render() {
    return (
        <Container>
            <Header>
                <Left>
                    <Button transparent>
                        <Icon
                            name="menu"
                            onPress={() =>
                                this.props.navigation.navigate("DrawerOpen")
                            }
                        />
                    </Button>
                </Left>
                <Body>
                    <Title>Run For A Reason</Title>
                </Body>
                <Right />
            </Header>
            <Content
                contentContainerStyle={{ flex: 1, flexDirection: "column" }}
            >
                <View style={{ flex: 1 }}>
                    <ImageBackground
                        source={require("../../img/background.jpg")}
                        style={{ flex: 1 }}
                    >
                        <View
                            style={{
                                justifyContent: "center",
                                alignItems: "center"
                            }}
                        >
                            <Image
                                source={require("../../img/logo.jpg")}
                                style={styles.logoStyle}
                            />
                        </View>
                        <View
                            style={{
                                paddingTop: 150,
                                paddingLeft: 20,
                                paddingRight: 20
                            }}
                        >
                            <Form style={{ backgroundColor: "white" }}>
                                <Item
                                    style={{
                                        marginLeft: 0,
                                        paddingLeft: 0
                                    }}
                                >
                                    <Icon
                                        style={styles.iconStyles}
                                        name="mail"
                                    />
                                    <Input
                                        style={{ paddingLeft: 0 }}
                                        placeholder="Email"
                                    />
                                </Item>
                                <Item>
                                    <Icon
                                        style={styles.iconStyles}
                                        name="lock"
                                    />
                                    <Input placeholder="Password" />
                                </Item>
                            </Form>
                        </View>
                        <View
                            style={{
                                flexDirection: "row",
                                flex: 1,
                                justifyContent: "center",
                                alignItems: "center"
                            }}
                        >
                            <Button
                                primary
                                style={{ borderRadius: 15, marginTop: 20 }}
                            >
                                <Text>Login</Text>
                            </Button>
                        </View>
                    </ImageBackground>
                </View>
            </Content>
        </Container>
    );
}
}

const styles = {
iconStyles: {
    color: "blue",
    paddingRight: 0
},
logoStyle: {
    paddingTop: 20,
    width: 250,
    height: 200,
    alignItems: "center",
    justifyContent: "center",
    resizeMode: "contain"
}
};

【问题讨论】：

标签： android reactjs react-native icons native-base

【解决方案1】：

将 Icon 替换为包含 Icon 的 Button 并将您的样式应用于 Button 组件。

<Button iconLeft>
    <Icon name='arrow-back' />
</Button>

【讨论】：

【解决方案2】：

你可以试试这个

  <Form style={{ backgroundColor: 'white' }}>
    <Item>
      <Icon style={styles.iconStyles} name='mail' />
      <Input placeholder='Email' />
    </Item>
    <Item>
      <Icon style={styles.iconStyles} name='lock' />
      <Input placeholder='Password' />
    </Item>
  </Form>

【讨论】：

是的，这就是我最初的样子，但从你的照片中可以看出....两个图标仍然被一根头发剪掉了，在右边。

【解决方案3】：

我通过增加图标的百分比宽度来解决这个问题：

style={{width: '115%'}}

【讨论】：