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

Question

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

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

"Don't have an account? Sign Up" 文本一直以大写形式出现，文本转换对其不起作用。有替代品吗？

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

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);

这可能是运行在小吃博览会上。

Answer 1

你有 4 个不同的问题，所以我会按顺序回答它们：

Snack with changes implemented so you can follow along

1) 文本输入宽度

首先，标签组件目前覆盖了 <Input> 组件，所以我暂时删除了它们。它们似乎旨在用作 placeholder 组件，因此我们可以改为修复 `placeholder

检查元素，我发现两个输入具有相同的宽度，但包含它们的 <Item> 宽度不同。这是由第二个 <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 将关闭文本中的 all-caps 样式按钮。

<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) 去除白色 header

要删除 header，我们可以将静态 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

Answer 2

我对互联网上的解决方案感到失望，none 其中的解决方案符合我的需要。所以我编写了自定义解决方案，使其具有最大动态性，并作为库上传，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("")

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

Editing Floating Label & Button from React Native

javascript

reactjs

react-native

react-native-android

native-base