Editing Floating Label & Button。
Editing Floating Label & Button。
我的用户名字段某种情况下比密码字段短。如何使它们变小，并且相同大小？
如何改变按钮的长度？只有宽度选项。
\"没有帐户？注册\"文本始终以大写形式出现，文本转换对其无效。有没有替代方案？
标题：我没有使用任何标题，但仍然存在白色标题。如何去掉它？
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 (
My App
Username this.setState({ username })} placeholder={'Username'} /> Password this.setState({ password })} placeholder={'Password'} secureTextEntry={true} />
this.props.navigation.navigate("Details")}> Login Forgot Password? Don't have an account? Sign Up
);
}
}
class DetailsScreen extends React.Component {
render() {
return (
Details Screen
);
}
}
class RegisterationScreen extends React.Component {
render() {
return (
sign up time
);
}
}
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上运行。
admin 编辑问题 2024年1月16日
我对互联网上的解决方案感到失望，没有哪个能满足我的需求。所以我编写了定制解决方案，把它打造成最动态的形式，并将其作为库上传，在这里。
注意：这是Expo支持的解决方案。
预览：
安装：
npm i fiction-expo-floating-label-input
导入：
import {FictionFloatingLabelInput} from "fiction-expo-floating-label";
基本示例：
setX(t)} // setting state variable />
完整示例：
setX(value)} // setting state variable // all other text input props are supported too, Except onFocus and onBlur, // instead below focus and blur events are explained preOnFocus={()=>{ // gets called before the animation starts , focusing }} postOnFocus={()=>{ // gets called after the animation ends , focusing }} preOnBlur={()=>{ // gets called before the animation starts , unfocusing }} postOnBlur={()=>{ // gets called after the animation ends, unfocusing }} />
注意：不要忘记将状态变量声明为x，例如
const [x, setX] = React.useState("")
你提出了四个不同的问题，我会按照顺序依次回答：
1）文本输入宽度
首先，标签组件当前覆盖了组件，因此我先将它们移除了。它们似乎是用作placeholder组件的，因此我们可以修复一下它们的placeholder。
检查元素时，我看到两个输入框具有相同的宽度，但包含它们的last属性引起的。
从last属性，改成
2）按钮长度
按钮的大小属性是width和height。
const styles = StyleSheet.create({
...
button: {
...
width: '170%',
height: '15%',
...
},
3）按钮文本大写
React Native中对于一个Button的默认prop包括uppercase，将其设置为javascript中的false就可以关闭按钮文本的全大写样式。
https://github.com/GeekyAnts/NativeBase/issues/1033
4）移除白色页眉
要移除页眉，我们可以在您的Login组件中添加一个静态的navigationOptions属性。
export class Login extends Component {
static navigationOptions = {
headerShown: false,
};
constructor(props) {
super(props);
...