Question

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

我尝试从项目，图标和输入中删除填充，但图标仍然被切断。然后我去改变图标本身的字体大小，但仍然没有做任何事情。

有谁知道造成这种情况的原因。我已经上传了我的屏幕图像及其代码。任何有关此事的帮助将不胜感激。这是我在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"
}
};

Answer 1

用包含图标的按钮替换图标，然后在按钮组件上应用样式。

public function setIcon($icon){
   if( ! ($icon instanceof Media) ){
       /** @var EntityManger $em get your EntityManager **/
       $icon = $em->getReference(Media::class, $icon)
   }

   $this->icon = $icon;
}

Answer 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>

Native Base / React Native表单标签图标被切断

2 个答案: