Question

我正在教自己React Native，截至目前，我遇到了一个小问题。

我希望<KeyboardAvoidingView/>推送2个输入框，以便用户可以看到他们正在键入的内容但我的代码没有这样做。它甚至没有显示用户正在键入的内容。用户必须按键盘上的Next才能看到键入的内容。此外，我按Next，它不会转到下一个输入框。

这是App.js：

import React, {Component} from 'react';
import {View, StyleSheet} from 'react-native';
import BackGround from './components/BackGround';

export default class App extends Component {
    render() {
        return(
            <View style={styles.back}>
                <BackGround/>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    back: {
        flex: 1
    }
});

这是Login.js：

import React, {Component} from 'react';
import {StyleSheet, TextInput, View, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native';

class Login extends Component {
    render() {
        return(
            <KeyboardAvoidingView behavior={"padding"} style={styles.container}>
                <View>
                    <TextInput
                        style={styles.input}
                        returnKeyType={"next"}
                        keyboardType={"email-address"}
                        autoCorrect={false}
                        placeholder={"Email"}
                    />

                    <TextInput
                        style={styles.input}
                        returnKeyType={"go"}
                        placeholder={"Password"}
                        secureTextEntry
                    />

                    <TouchableOpacity>
                        <Text style={styles.loginAndCA}>Login</Text>
                    </TouchableOpacity>

                    <TouchableOpacity>
                        <Text style={styles.loginAndCA}>Create Account</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 20
    },

    input: {
        backgroundColor: '#DAE5FF',
        // paddingBottom: 20,
        padding: 20,
        paddingHorizontal: 15,
        marginBottom: 10,
        borderRadius: 15,
    },

    loginAndCA: {
        fontSize: 40,
        textAlign: 'center',
        color: 'white',
        fontFamily: 'Bodoni 72 Smallcaps',
        paddingHorizontal: 10
    }
});

export default Login;

这是BackGround.js：

import React, {Component} from 'react';
import {StyleSheet, Image, View, Text} from 'react-native';
import Login from './Login';

class BackGround extends Component {
    render() {
        return(
            <View style={styles.first}>
                <Image style={styles.container} source={require('../pictures/smoke.jpg')}>                      
                        <Login/>
                </Image>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        width: null,
        height: null,
        backgroundColor: 'rgba(0,0,0,0)',
    },

    first: {
        flex: 1
    },

    second: {
       paddingTop: 290 // Moves both <TextInput> boxes down.
    },

});

export default BackGround;

为什么我的一个组件不能在我的React Native项目中工作？

0 个答案: