Дизайн кнопок и заголовков на странице входа

Question

Я создаю простую страницу входа в реагировать на нативную и сталкиваюсь с некоторыми путаницами в стиле. Как я могу сделать текст на кнопке в центре?

Как я могу взять текст INSTARIDE вверх и не так близко к полю имени пользователя. Код можно запустить на Expo Snack.

import React, { Component } from 'react';
import { Alert, Button, Text, Container, Header, Content, TextInput, Form, Item, View, Label, StyleSheet } from 'react-native';

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

    this.state = {
      username: '',
      password: '',
    };
  }

  onLogin() {
    const { username, password } = this.state;

    Alert.alert('Credentials', `${username} + ${password}`);
  }

  render() {
    return (
      <View style={styles.container}>
      <Text style={{fontWeight: 'bold'}}>
          My App
        </Text>
        <TextInput
          value={this.state.username}
          onChangeText={(username) => this.setState({ username })}
          placeholder={'Username'}
          style={styles.input}
        />
        <TextInput
          value={this.state.password}
          onChangeText={(password) => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          style={styles.input}
        />

        <Button rounded success
          title={'Login!'}
          style={styles.input}
          color = '#65c756'
          onPress={this.onLogin.bind(this)}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#1b1c1c',
  },
  input: {
    width: 200,
    height: 33,
    padding: 10,
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 10,
  },
});

Answer 1

Проверьте это ниже код

import React, { Component } from 'react';
import { Alert, Button, Text, TextInput, View, StyleSheet } from 'react-native';

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

    this.state = {
      username: '',
      password: '',
    };
  }
  onLogin() {
    const { username, password } = this.state;
    Alert.alert('Credentials', `${username} + ${password}`);
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.textStyle}>My App</Text>
        <TextInput
          value={this.state.username}
          onChangeText={username => this.setState({ username })}
          placeholder={'Username'}
          style={styles.input}
        />
        <TextInput
          value={this.state.password}
          onChangeText={password => this.setState({ password })}
          placeholder={'Password'}
          secureTextEntry={true}
          style={styles.input}
        />
        <View style={styles.buttonStyle}>
          <Button
            rounded
            success
            title={'Login!'}
            color="#65c756"
            onPress={this.onLogin.bind(this)}
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    width: '90%',
    padding: 10,
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: 10,
    alignSelf: 'center',
  },
  buttonStyle: {
    width: '90%',
    alignSelf: 'center',
  },
  textStyle: {
    fontWeight: 'bold',
    justifyContent: 'center',
    alignSelf: 'center',
    marginBottom: 30, 
    fontSize: 18,
  },
});

Измените это в соответствии с вашими требованиями. Не стесняйтесь сомнений

Answer 2

Чтобы центрировать кнопку, попробуйте добавить text-align: center; к style реквизиту в <Text style={{color:'white'}}>Login!</Text>

Answer 3

Создание настраиваемой кнопки по тексту и непрозрачной непрозрачности

<TouchableOpacity style={{backgroundColor:'#65c756',paddingVertical:5,paddingHorizontal: 30,borderRadius:6}} onPress={this.onLogin.bind(this)}>
        <Text style={{color:'white'}}>Login!</Text>
        </TouchableOpacity>

для текста, близкого к вводу, просто добавьте немного отступов или полей ч / б к ним