貼一下 我的render里面的代碼 和效果圖

 render() {
        return (
            <Image source={{uri:'bg'}} style={styles.container}>
                 <KeyboardAvoidingView behavior='position' >
                      <View>

                      <View style={styles.logoView}>
                              <Image source={{uri:'grplogo'}} style={styles.grplogo}/>
                      </View>

               

                    <View   style={styles.textInputBoxStyle}>
                          <Image source={{uri:'user'}} style={styles.iconStyle}/>
                          <TextInput
                              style={styles.textInputStyle}
                              maxLength={20}
                              autoCapitalize='none'
                              clearButtonMode="while-editing"
                              placeholder="請輸入用戶名"
                              placeholderTextColor={'rgba(255,255,255,0.8)'}
                              underlineColorAndroid='transparent'
                              onChangeText={(user_id) => this.setState({user_id})}
                              value={this.state.user_id}
                          />
                     </View>

                  <View style={styles.line}/>

                <View   style={styles.textInputBoxStyle2}>
                    <Image source={{uri:'lock'}} style={styles.iconStyle}/>
                    <TextInput
                        autoCapitalize='none'
                        style={styles.textInputStyle}
                        maxLength={20}
                        clearButtonMode="while-editing"
                        placeholder="請輸入密碼"
                        placeholderTextColor={'rgba(255,255,255,0.8)'}
                        secureTextEntry={true}
                        //去掉android默認下劃線
                        underlineColorAndroid='transparent'
                        onChangeText={(user_password) =>
                                    this.setState({user_password})}
                        value={this.state.user_password}
                    />
                </View>
                <View style={styles.line}/>


                 <View style={{alignItems:'center'}}>

                <View style={styles.loginBox}>
                    <Text
                        onPress={()=>this._login()}
                        style={styles.loginText}
                    >登錄</Text>
                </View>
                </View>
 
               </View>

            </KeyboardAvoidingView>
            </Image>
           
        );
    }

樣式

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems:'center',
        //justifyContent: 'center',
    },

 
    logoView:{
        paddingTop:150,
        alignItems:'center',
    },
    grplogo:{
        width: 137,
        height:36,
    },

    line:{
        width:width-60,
        height:0.8,
        marginLeft:30,
        marginRight:30,
        backgroundColor:'white'
    },


    textInputBoxStyle:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height:40,
        marginLeft:30,
        marginRight:30,
        marginTop:90,

    },

    textInputBoxStyle2:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height:40,
        marginLeft:30,
        marginRight:30,
        marginTop:40,
    },



    iconStyle:{
        width: 18,
        height: 20,
    },
    textInputStyle: {
      flex: 1,
      paddingLeft:20,
      justifyContent: 'center',
      color:'white'
    },

    loginBox: {
        justifyContent:'center',
        alignItems:'center',
        marginTop: 49,
        backgroundColor: '#4A90E2',
        height: 40,
        width:130,
        borderRadius:20,
    },
    loginText:{
        textAlign:'center',
        fontSize:18,
        color:'white',
        paddingHorizontal:30,
    }
});

效果圖，觀察GRP 距離頂部的距離

C5BD64A1-BB5A-4DDE-AAF2-16E48587B13B.png

F3ACF40D-F917-498A-A65F-C96BCE656CC9.png