Input text react native cannot get focus

问题

I recently learn react native, but i got problem with input text. When i try to type 1st text field the 2nd text field cannot get focus, when i tap 2nd text field two times text field focus correctly

See video below : https://streamable.com/70njw

My code :

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

If i change View to ScrollView everything works correctly, but may broken page design

来源：https://stackoverflow.com/questions/53205007/input-text-react-native-cannot-get-focus

标签

javascript

reactjs

react-native

react-native-android