AskOverflow.Dev

AskOverflow.Dev Logo AskOverflow.Dev Logo

AskOverflow.Dev Navigation

  • 主页
  • 系统&网络
  • Ubuntu
  • Unix
  • DBA
  • Computer
  • Coding
  • LangChain

Mobile menu

Close
  • 主页
  • 系统&网络
    • 最新
    • 热门
    • 标签
  • Ubuntu
    • 最新
    • 热门
    • 标签
  • Unix
    • 最新
    • 标签
  • DBA
    • 最新
    • 标签
  • Computer
    • 最新
    • 标签
  • Coding
    • 最新
    • 标签
主页 / coding / 问题 / 77045375
Accepted
jgore200377
jgore200377
Asked: 2023-09-05 22:25:02 +0800 CST2023-09-05 22:25:02 +0800 CST 2023-09-05 22:25:02 +0800 CST

反应本机按钮不响应样式表更改(居中按钮)

  • 772

昨天我第一次开始学习 React Native,同时构建了一个博览会应用程序。我首先创建了一个登录屏幕,但在设计注册功能时,我遇到了一个我无法理解的问题。

该应用程序的照片

正如您所看到的,我的密码和用户名字段与弹性框正确内联,但由于某种原因,“注册”按钮没有响应我正在应用的任何定位。

简而言之,我想要实现的就是将注册按钮居中。

该应用程序的代码在这里,任何阅读问题的人都应该只关心注册:样式和按钮,尽管解决方案可能位于所有内容的外壳中。

import React, { useRef,useState} from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, TextInput, View,Button} from 'react-native';

export default function Login() {

  const user = React.useRef();
  const pass = React.useRef();
  const [username, setText] = useState('');

  const moveToPass = () => {
    pass.current.focus();
  };

  const handleKeyPress = ({ nativeEvent: {text} }) => {
    console.log(text)
    console.log(username);
    let fire= []

    if(username.length==0){
      fire.push(user)
    }
    if(text.length==0){
      fire.push(pass)
    }
  } 

  const handleSignUp =({nativeEvent: PressEvent})=>{
    console.log(PressEvent)
  }
  
  return (
    <View style={styles.container}>
      <TextInput ref={user} style={styles.input} onSubmitEditing={moveToPass} returnKeyType="next" onChangeText={newText => setText(newText)}  placeholder="Username"/>
      <TextInput ref={pass} style={styles.input} onSubmitEditing={handleKeyPress} secureTextEntry={true} placeholder="Password"/>
      <Button title="Sign Up" style={styles.signup} color={'#FF0000'} onPress={handleSignUp} ></Button>
      <StatusBar style="auto" />

    </View>
  );
}
 

const styles = StyleSheet.create({
  container: {
    paddingTop:'10%',
    flex: 1,
    flexDirection:'column',
    backgroundColor: '#fff',
    alignItems: 'flex-start',
  },
  input:{
    height: 40,
    width:'80%',
    margin: 12,
    borderWidth: 1,
    padding: 10,
    borderColor:'blue',
    alignSelf:'center',
    borderRadius:20,
  },
  signup:{
    width: '100%',
    height: '30%',
    alignSelf:'center',
    justifyContent:'center',
    alignContent:'center',
    alignItems:'center',
  },
});

我已经尝试了这个问题的大多数基本解决方案,但我的谷歌查询没有返回有用的结果。我相信它与 flex-box 有关,但我不明白它,因为它应该在另一个标签内。

至于答案,非常感谢解释为什么没有应用规则的原因并更正上面的代码片段以使按钮居中。

react-native
  • 1 1 个回答
  • 27 Views

1 个回答

  • Voted
  1. Best Answer
    Mod3rnx
    2023-09-05T23:16:02+08:002023-09-05T23:16:02+08:00

    问题是 React Native Button 组件不允许您覆盖其样式,您可以看到您尝试使用的docs、 prop 没有在任何地方列出。style

    根据文档:

    一个基本的按钮组件,应该在任何平台上都能很好地呈现。支持最低程度的定制。如果此按钮不适合您的应用程序,您可以使用 Pressable 构建自己的按钮。要获得灵感,请查看 Button 组件的源代码。

    也许您可以尝试设置一些 linting 或类型检查,因为使用未声明的 prop 会导致错误并提示您出现问题。

    • 1

相关问题

  • 反应原生元素输入边框底部问题,​​带半径

  • 仅当拉动发生在 FlatList 组件周围时,拉动刷新才有效

  • 电子邮件未发送到 *.js 中的用户电子邮件地址

Sidebar

Stats

  • 问题 205573
  • 回答 270741
  • 最佳答案 135370
  • 用户 68524
  • 热门
  • 回答
  • Marko Smith

    使用 <font color="#xxx"> 突出显示 html 中的代码

    • 2 个回答
  • Marko Smith

    为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类?

    • 1 个回答
  • Marko Smith

    您可以使用花括号初始化列表作为(默认)模板参数吗?

    • 2 个回答
  • Marko Smith

    为什么列表推导式在内部创建一个函数?

    • 1 个回答
  • Marko Smith

    我正在尝试仅使用海龟随机和数学模块来制作吃豆人游戏

    • 1 个回答
  • Marko Smith

    java.lang.NoSuchMethodError: 'void org.openqa.selenium.remote.http.ClientConfig.<init>(java.net.URI, java.time.Duration, java.time.Duratio

    • 3 个回答
  • Marko Smith

    为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)?

    • 4 个回答
  • Marko Smith

    为什么库中不调用全局变量的构造函数?

    • 1 个回答
  • Marko Smith

    std::common_reference_with 在元组上的行为不一致。哪个是对的?

    • 1 个回答
  • Marko Smith

    C++17 中 std::byte 只能按位运算?

    • 1 个回答
  • Martin Hope
    fbrereto 为什么在传递 {} 时重载解析更喜欢 std::nullptr_t 而不是类? 2023-12-21 00:31:04 +0800 CST
  • Martin Hope
    比尔盖子 您可以使用花括号初始化列表作为(默认)模板参数吗? 2023-12-17 10:02:06 +0800 CST
  • Martin Hope
    Amir reza Riahi 为什么列表推导式在内部创建一个函数? 2023-11-16 20:53:19 +0800 CST
  • Martin Hope
    Michael A fmt 格式 %H:%M:%S 不带小数 2023-11-11 01:13:05 +0800 CST
  • Martin Hope
    God I Hate Python C++20 的 std::views::filter 未正确过滤视图 2023-08-27 18:40:35 +0800 CST
  • Martin Hope
    LiDa Cute 为什么 'char -> int' 是提升,而 'char -> Short' 是转换(但不是提升)? 2023-08-24 20:46:59 +0800 CST
  • Martin Hope
    jabaa 为什么库中不调用全局变量的构造函数? 2023-08-18 07:15:20 +0800 CST
  • Martin Hope
    Panagiotis Syskakis std::common_reference_with 在元组上的行为不一致。哪个是对的? 2023-08-17 21:24:06 +0800 CST
  • Martin Hope
    Alex Guteniev 为什么编译器在这里错过矢量化? 2023-08-17 18:58:07 +0800 CST
  • Martin Hope
    wimalopaan C++17 中 std::byte 只能按位运算? 2023-08-17 17:13:58 +0800 CST

热门标签

python javascript c++ c# java typescript sql reactjs html

Explore

  • 主页
  • 问题
    • 最新
    • 热门
  • 标签
  • 帮助

Footer

AskOverflow.Dev

关于我们

  • 关于我们
  • 联系我们

Legal Stuff

  • Privacy Policy

Language

  • Pt
  • Server
  • Unix

© 2023 AskOverflow.DEV All Rights Reserve