昨天我第一次开始学习 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 Button 组件不允许您覆盖其样式,您可以看到您尝试使用的docs、 prop 没有在任何地方列出。
style
根据文档:
也许您可以尝试设置一些 linting 或类型检查,因为使用未声明的 prop 会导致错误并提示您出现问题。