从 React Native 编辑浮动标签和按钮

Posted 2023-02-22

【中文标题】从 React Native 编辑浮动标签和按钮

【英文标题】：Editing Floating Label & Button from React Native

【发布时间】：2020-05-09 23:01:05

【问题描述】：

我的用户名字段比密码字段短。我怎样才能使它们更小，并且尺寸相同？

如何更改按钮的长度？只有一个宽度选项。

“没有帐户？注册”文本一直以大写形式出现，并且文本转换不起作用。有其他选择吗？

页眉：我没有使用任何页眉，但仍然有一个白色的。我怎样才能删除它？？

import React,  Component  from 'react';
import  Container, Header, Left, Body, Right, Button, Title, Text, Form, Item, Input, Label from 'native-base';
import  StyleSheet, View from 'react-native';
import  StackNavigator  from 'react-navigation';
import  createStackNavigator  from 'react-navigation-stack';
import  DrawerNavigator  from "react-navigation";
import  createAppContainer  from 'react-navigation';

export class Login extends Component 
  constructor(props) 
    super(props);

    this.state = 
      username: '',
      password: '',
    ;
  
  render() 
    return (
      <Container View style=styles.container>
      <Text View style=styles.title>
      My App</Text>
      <Form View style=styles.formInput>
            <Item floatingLabel>
              <Label View style=styles.labelText>Username</Label>
              <Input 
              View style=styles.textInput
              value=this.state.username
          onChangeText=username => this.setState( username )
          placeholder='Username'
          />
            </Item>
            <Item floatingLabel last>
              <Label View style=styles.labelText>Password</Label>
              <Input 
              View style=styles.textInput
              value=this.state.password
          onChangeText=password => this.setState( password )
          placeholder='Password'
          secureTextEntry=true
          />
            </Item>
          </Form>
          <Left>
            <Button View style=styles.button
            onPress=() => this.props.navigation.navigate("Details")>
              <Text>Login</Text>
            </Button>
            <Text View style=styles.forgotText >
            Forgot Password?</Text>
          </Left>
          <Right>
            <Button hasText transparent>
              <Text
              View style=styles.signupText
              >Don't have an account? Sign Up</Text>
            </Button>
          </Right>
      </Container>
    );
  

class DetailsScreen extends React.Component 
  render() 
    return (
        <Text>Details Screen</Text>
    );
  


class RegisterationScreen extends React.Component 
  render() 
    return (

        <Text>sign up time</Text>
    );
  


const LoginRouter = createStackNavigator(
  
    Home:  screen: Login ,
    Details:  screen: DetailsScreen ,       
  
)

const styles = StyleSheet.create(
  container: 
    flex: 1,
    backgroundColor: '#242625',
  ,
  title: 
    textAlign: 'center',
    fontSize: 22,
    color: 'white',
  ,
  textInput: 
    color: 'white',
  ,
  button: 
    marginTop: 15,
    backgroundColor: '#65c756',
    width: '170%',
    justifyContent: 'center',
    alignSelf: 'center'
  ,
  forgotText: 
    marginTop: 15,
    justifyContent: 'center',
    color: 'white',
  ,
   signupText: 
    marginTop: 70,
    justifyContent: 'center',
    color: 'white',
  ,
  labelText: 
    fontSize : 14,
  ,
  formInput:     
    borderBottomWidth: 1, 
    marginLeft: 20,   
    marginRight: 20,   
  ,
);

export default createAppContainer(LoginRouter);

这可以在 Snack Expo 上运行。

【参考方案1】：

您有 4 个不同的问题，所以我将按顺序回答：

Snack with changes implemented so you can follow along

1) 文本输入宽度

首先，标签组件目前正在覆盖<Input> 组件，所以我暂时将它们删除。它们似乎打算用作placeholder 组件，因此我们可以修复`占位符

检查元素，我看到两个输入具有相同的宽度，但包含它们的<Item>s 是不同的宽度。这是由第二个<Item> 上的last 属性引起的。

从<Item floatingLabel last> 中删除last 属性会生成<Item floatingLabel>，现在<Item> 组件的底部白色边框宽度相同

2) 按钮长度

按钮大小属性为width 和height

const styles = StyleSheet.create(
    ...
    button: 
        ...
        width: '170%',
        height: '15%',
        ...
    ,

3) 按钮文本大写

React Native 中 a 的默认属性包含一个 uppercase 属性，因此将其设置为 javascript false 将关闭按钮内文本的全大写样式。

<Button hasText transparent>
    <Text style=styles.signupText uppercase=false>
    "Don't have an account? Sign Up"
    </Text>
</Button>

https://github.com/GeekyAnts/NativeBase/issues/1033

4) 去除白色标题

要删除标题，我们可以将静态navigationOptions 属性添加到您的Login 组件

export class Login extends Component 
  static navigationOptions = 
    headerShown: false,
  ;

  constructor(props) 
    super(props);
    ...

https://reactnavigation.org/docs/en/headers.html

Hide header in stack navigator React navigation

【参考方案2】：

我对互联网上的解决方案感到沮丧，但没有一个能满足我的需求。所以我编写了自定义解决方案，使其具有最大的动态性，并作为库上传，here it is。

注意：这是 Expo 支持的解决方案

预览：

安装：

npm i fiction-expo-floating-label-input

导入：

import FictionFloatingLabelInput from "fiction-expo-floating-label";

基本示例：

<FictionFloatingLabelInput
  label="First Name"
  value=x // just a state variable
  labelFocusedTop=10 // Y position of label when focused
  labelUnFocusedTop=-5 // Y position of label when un-focused
  onChangeText=(t)=>setX(t) // setting state variable
/>

完整示例：

<FictionFloatingLabelInput
  label="First Name" // label itself
  value=x // just a state variable

  labelFocusedTop=-5 // Y position of label when focused
  labelUnFocusedTop=10 // Y position of label when un-focused

  containerStyle= // container style
  focusedContainerStyle= // container style when focused
  unFocusedContainerStyle= // container style when un-focused

  subContainerStyle= // child container style
  focusedSubContainerStyle= // child container style when focused
  unfocusedSubContainerStyle= // child container style when un-focused

  labelStyle= // label style
  focusedLabelStyle= // label style when focused
  unfocusedLabelStyle= // label style when un-focused

  textInputStyle= // text input style
  focusedTextInputStyle= // text input style when focused
  unFocusedTextInputStyle= // text input style when un-focused

  labelFontSizeUnFocused=14 // label font size when un-focused
  labelFontSizeFocused=10 // label font size when focused

  labelColorUnFocused="red" // label color when un-focused
  labelColorFocused="green" // label color when focused

  underlineColorandroid="transparent" // you know this one, right?

  selectionColor="red" // cursor and selection color

  onChangeText=(value)=>setX(value) // setting state variable

  // all other text input props are supported too, Except onFocus and onBlur, 
  // instead below focus and blur events are explained

  preOnFocus=()=> 
    // gets called before the animation starts , focusing
  

  postOnFocus=()=> 
    // gets called after the animation ends , focusing
  

  preOnBlur=()=> 
    // gets called before the animation starts , unfocusing
  

  postOnBlur=()=> 
    // gets called after the animation ends, unfocusing
  

/>

注意：不要忘记将状态变量声明为x，比如

const [x, setX] = React.useState("")