javascript - 从 React Native 编辑 float 标签和按钮

Question

我的用户名字段比密码字段短。如何使它们更小并保持相同大小？

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

“没有帐户？注册”文本始终以大写形式出现，并且文本转换不起作用。有替代方案吗？

标题:我没有使用任何标题，但仍然存在一个白色的标题。我怎样才能删除它？

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组件，因此我们可以修复“占位符”

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

删除 last来自 <Item floatingLabel last> 的属性产量<Item floatingLabel> ，现在 <Item> 具有相同宽度的底部白色边框。组件

2) 按钮长度

按钮大小属性为 width和height

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

3) 按钮文本大写

React Native 中 a 的默认属性包括 uppercase prop，因此将其设置为 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)删除白色标题

要删除 header ，我们可以添加静态 navigationOptions属性(property)给您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