iOS强密码自动填充未显示在确认密码上

时间:2018-12-22 12:13:32

标签: react-native react-navigation

iOS会自动填写第一个密码字段,而不是第二个。如何使密码和确认密码字段像在应用程序中一样自动填充?

更新:似乎系统将注册表单视为登录表单,因此它会自动填充第一个密码字段。另外,当我导航回登录屏幕时,系统会提示我是否要在钥匙串中保存密码,这是意外的。

更新:我正在使用堆栈导航(屏幕:登录和注册)。在我以注册表格形式输入名称或电子邮件后发现,它将强密码自动填充到“登录”屏幕的密码字段和“注册”屏幕的第一个密码字段。有什么办法告诉系统这些是不同的形式? (就像在网络编程中使用其他<form>一样。)

Preview Image 1

Preview Image 2

登录屏幕

export default class Login extends Component {
    Login() {

    }

    render() {
        return (
            <IndexBackground>
                <IndexBox>
                    <IndexLogo />
                    <IndexTextInput placeholder="Name" />
                    <IndexTextInput placeholder="Password" secureTextEntry={true}/>
                    <IndexButton title="Log in" onPress={this.Login} />
                    <IndexText text="Forgot Password?" style={styles.textForgot} />
                    <IndexText text="Don't have an account?" style={styles.textSignUp}>
                        <Text style={styles.textLink} onPress={() => this.props.navigation.navigate('SignUp')}> Sign up</Text>
                    </IndexText>
                </IndexBox>
            </IndexBackground>
        )
    }
}

注册屏幕

export default class SignUp extends Component {
    user = {
        email: '',
        name: '',
        pass: '',
        confirmpass: ''
    };

    setUser = (key, value) => {
        this.user[key] = value;
        console.log(this.user);
    }

    signUp() {

    }

    render() {
        return (
            <IndexBackground>
                <IndexBox>
                    <IndexLogo />
                    <IndexTextInput placeholder="Email" onTextChanged={(value) => this.setUser('email', value)} />
                    <IndexTextInput placeholder="Name" onTextChanged={(value) => this.setUser('name', value)} />
                    <IndexTextInput placeholder="Password" secureTextEntry={true} onTextChanged={(value) => this.setUser('pass', value)} />
                    <IndexTextInput placeholder="Confirm Password" secureTextEntry={true} onTextChanged={(value) => this.setUser('confirmpass', value)} />
                    <IndexButton title="Sign up" onPress={this.signUp} />
                    <IndexText text="Have an account?" style={styles.textSignUp}>
                        <Text style={styles.textLink} onPress={() => this.props.navigation.navigate('Login')}> Log in</Text>
                    </IndexText>
                </IndexBox>
            </IndexBackground>
        )
    }
}

NavLogin

const routeConfigs = {
    Login: { screen: Login },
    SignUp: { screen: SignUp }
}

const navConfigs = {
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

const NavLogin = createStackNavigator(routeConfigs, navConfigs);
const ContainerLogin = createAppContainer(NavLogin);

export default ContainerLogin;

3 个答案:

答案 0 :(得分:0)

请尝试以下类似操作

    def replace_apostrophy(text):
return text.replace("a\u0302\u20acTM","'")

答案 1 :(得分:0)

createStackNavigator和IOS强密码具有相同的错误。

我认为这是因为堆栈导航器不会卸载不活动的组件,并且IOS可以与它们交互。 我为登录表单添加了onFocus事件(withNavigationFocus)的订阅,并针对未关注的状态(当注册处于活动状态时)呈现了空的登录表单:

import { withNavigationFocus } from 'react-navigation';
...
class Login extends Component {
    Login() {

    }    
    render() {
        if (!this.props.isFocused) return null;
        return (
            <IndexBackground>
                ...
            </IndexBackground>
        )
    }
}
export default withNavigationFocus(Login);

答案 2 :(得分:0)

你可以试试,添加道具:

  blurOnSubmit={false}
  autoCapitalize="none"
  onSubmitEditing={() => Keyboard.dismiss()}
  textContentType="oneTimeCode"