Question

我最近学习了本机响应，但是输入文本出现问题。当我尝试输入第一个文本字段时，第二个文本字段无法获得焦点，当我点击第二个文本字段两次时，文本字段正确聚焦

我的代码：

import React, { Component, Fragment } from 'react'
import { View, StyleSheet } from 'react-native'
import { Text, Button, Content, Card, CardItem, Body, Input, Icon, Item} from 'native-base'
import { Grid, Row } from 'react-native-easy-grid'

import ThemeVariable from '../../../native-base-theme/variables/platform'

import AuthHeaderNavigation from '../../components/auth/HeaderNavigation'

class LoginScreen extends Component {
    state = {
        input: {
            email: null,
            password: null
        }
    }

    setInputState(key, value) {
        this.setState(prevState => ({
            input: {
                ...prevState.input,
                [key]: [value]
            }
        }))
    }

    render() {
        return (
             <Fragment>
                <AuthHeaderNavigation/>
                <Grid>
                   <Row style={styles.firstRow}></Row>
                   <View style={styles.authWrapper}>
                      <Card style={styles.authCard}>
                         <CardItem>
                            <Body>
                               <Item>
                                  <Icon style={{ color: ThemeVariable.footerDefaultBg }} name="person"/>
                                  <Input onChangeText={text => this.setInputState('email', text)} placeholder="Email"/>
                               </Item>                               
                            </Body>
                         </CardItem>                        
                         <CardItem style={{ paddingTop: 0}}>
                            <Body>
                               <Item last>
                                  <Icon style={{ color: ThemeVariable.footerDefaultBg }} name="lock"/>
                                  <Input onChangeText={text => this.setInputState('password', text)} 
                                         secureTextEntry={true}
                                         placeholder="Password"/>
                               </Item>                               
                            </Body>
                         </CardItem>
                         <CardItem>
                            <Body>
                               <Button block>
                                   <Text> Login </Text>
                               </Button>
                            </Body>
                         </CardItem>
                      </Card>
                   </View>
                   <Row style={styles.secondRow}></Row>
                </Grid>
             </Fragment>
        )
    }
}

const styles = StyleSheet.create({
    content: {
        height: '100%'
    },
    firstRow: {
        backgroundColor: ThemeVariable.footerDefaultBg
    },
    secondRow: {
        backgroundColor: ThemeVariable.contentBaseBgColor
    },
    authWrapper: {
        position: 'absolute',
        width: '100%',
        height: '100%',
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection:'row',
    },
    authCard: {
        width: '90%',
        borderRadius: 6,
        padding: 5,

    }

})

export default LoginScreen

如果我将View更改为ScrollView，则一切正常，但可能会破坏页面设计

输入文本反应本机无法获得焦点

0 个答案: