Редактирование плавающей метки и кнопки из React Native - PullRequest
Новая
       32

Редактирование плавающей метки и кнопки из React Native

0 голосов
/ 23 января 2020

Мое поле имени пользователя несколько короче, чем поле пароля. Как я могу сделать их меньше и одинакового размера?

Как изменить длину кнопки? Есть только опция ширины.

Текст «У вас нет учетной записи? Зарегистрироваться» продолжает появляться в верхнем регистре, и преобразование текста не работает на нем. Есть ли альтернатива?

Заголовок: я не использую заголовок, но присутствует белый. Как я могу удалить это ?? 

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 Ответ

1 голос
/ 24 января 2020

У вас было 4 отдельных вопроса, поэтому я буду обращаться к ним по порядку:

Закуска с внесенными изменениями, чтобы вы могли следить

1) Ширина ввода текста

Прежде всего, компоненты меток в настоящее время покрывают <Input> Компоненты, поэтому я удалил их сейчас. Похоже, что они предназначены для функционирования в качестве placeholder компонентов, поэтому мы можем исправить `placeholder вместо

. Осматривая элементы, я вижу, что оба входа имеют одинаковую ширину, но <Item>, содержащие их разной ширины. Это вызвано атрибутом last во втором <Item>.

Удаление атрибута last из <Item floatingLabel last> приводит к <Item floatingLabel>, который теперь имеет одинаковую нижнюю белую границу ширины для обоих <Item> компоненты

2) Длина кнопки

Свойства размера кнопки: width и height

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

3) Прописная надпись текста кнопки

Пропорка по умолчанию для React Native включает в себя 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) Удаление белого заголовка

Чтобы удалить заголовок, мы можем добавить свойство stati c navigationOptions к вашему Login компоненту 

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

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

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

Скрыть заголовок в навигаторе стека Реактивная навигация

...