Question

我对React-Native非常陌生，一直在尝试根据显示或消失的键盘自动调整视图。

我已经使用了标签（和模块），它的运行方式与iOS模拟器完全相同，但在Android模拟器上它并没有显示我的整个徽标，而且文本字段无处可寻。 Android和iOS的索引文件中的代码是相同的，所以我有点卡在这个上。下图：

====== iOS屏幕截图 ======

====== Android模拟器屏幕 ======

Android Emulator Login Screen Screenshot

有什么东西我做错了或丢失了吗？

以下是我的登录/启动/主屏幕的代码，包括我的样式/样式表。

import React, { Component } from 'react';
import { AppRegistry, Text, View, Image, StatusBar, ScrollView, KeyboardAvoidingView, Keyboard } from 'react-native';
import Dimensions from 'Dimensions';
import TextField from 'react-native-md-textinput';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

let window = Dimensions.get('window');

class MainApp extends Component {

  constructor() {
    super();
    this.state = {}
  }

  render(){
    return (

      <View style={styles.contentContainerStyle}>

          <StatusBar barStyle = "light-content" hidden = {false} />

          <KeyboardAwareScrollView extraHeight={80}>

            <Image style={styles.ctfLondonLogoStyle} source={require('../images/ctflondon.png')}/>

            <View style={styles.usernameTextFieldPositioningStyle}>
              <TextField style={styles.textFieldStyles}
                dense={true}
                label='Username'
                labelColor='white'
                highlightColor='white'
                borderColor='white'
                fontSize={13}
                selectionColor='white'
              />
            </View>

            <View style={styles.passwordTextFieldPositioningStyle}>
              <TextField
                dense={true}
                label='Password'
                labelColor='white'
                highlightColor='white'
                borderColor='white'
                fontSize={13}
                selectionColor='white'
                secureTextEntry={true}
              />
            </View>

          </KeyboardAwareScrollView>

      </View>
    )
  }

}


const styles = {

  contentContainerStyle: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'rgba(190,0,39,0.7)'
  },

  mainScrollViewStyle: {

  },

  ctfLondonLogoStyle: {
    alignSelf: 'center',
    top: 150,
    width: 150,
    height: 150
  },

  textFieldStyles: {
    width: 150,
    height: 35,
    color: 'white'
  },

  usernameTextFieldPositioningStyle: {
    position: 'relative',
    width: window.width * 0.55,
    alignSelf: 'center',
    top: 180
  },

  passwordTextFieldPositioningStyle: {
    position: 'relative',
    width: window.width * 0.55,
    alignSelf: 'center',
    top: 200
  }

};

export default MainApp;

KeyboardAwareScrollView适用于iOS，但不适用于Android，似乎在Android上混乱布局

0 个答案: