主页 / user-22089051

jgore200377's questions

Martin Hope
jgore200377
Asked: 2023-09-05 22:25:02 +0800 CST
  • 5

昨天我第一次开始学习 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