react-native-keyboard-aware-scroll-view 无法正常工作

Question

我正在尝试使用 react-native-keyboard-aware-scroll-view 所以键盘不会覆盖我的输入。

出于某种原因，我猜它总是认为有一个键盘处于活动状态，因为它总是压缩所有内容。

附件是正在发生的事情的图片以及代码。有没有人知道这里发生了什么？我一直在玩它一段时间，但没有运气。我正在运行 react-native v 0.33 和 react-native-keyboard-aware-scroll-view v 0.2.1。

https://www.npmjs.com/package/react-native-keyboard-aware-scroll-view

 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

class LoginIOS extends Component{

  constructor(props) {
    super(props);
    this.login = this.login.bind(this);
    this.renderScene = this.renderScene.bind(this);
    this.state={
      username: '',
      password: ''
    };
  }

  render() {
    return (
      <Navigator
          renderScene={this.renderScene}
          navigator={this.props.navigator}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: 'transparent'}}
                routeMapper={NavigationBarRouteMapper} />
          } />
    );
  }

  renderScene() {
    return (
    <KeyboardAwareScrollView>
      <View style={styles.container}>
        <Spinner visible={this.state.visible} />
        <StatusBar barStyle="light-content" hidden={true}/>
        <View style={styles.topContainer}>
          <View style={styles.bannerContainer}>
            <View style={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}>
              <Image style={styles.mark} source={require('***')} />
            </View>
          </View>
          <View style={styles.credentialContainer}>
                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="person" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Username"
                            autoCorrect={false}
                            autoCapitalize="none"
                            returnKeyType="next"
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({username: text})}
                            value={this.state.username}

                            >

                        </TextInput>
                      </View>
                </View>

                <View style={styles.inputContainer}>
                  <Icon style={styles.inputPassword} name="lock" size={28} color="#FFCD00" />
                      <View style={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}>
                        <TextInput
                            style={styles.input}
                            placeholder="Password"
                            returnKeyType="done"
                            autoCorrect={false}
                            secureTextEntry={true}
                            placeholderTextColor="#e0e0e0"
                            onChangeText={(text) => this.setState({password: text})}
                            value={this.state.password}
                            onSubmitEditing={(event)=> {
                              this.login();
                            }}
                            >
                        </TextInput>
                      </View>
                </View>
                <TouchableOpacity style={styles.forgotContainer}>
                </TouchableOpacity>
            </View>

        </View>

        <TouchableHighlight
          underlayColor="#D6AB00"
          onPress={this.login}
          style={styles.signInButtonContainer}>
          <Text style={styles.signInText}>Sign In</Text>
        </TouchableHighlight>

      </View>
    </KeyboardAwareScrollView>

    );
  }

原文由 wdlax11 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我通过使用另一个库解决了这个问题。不知道为什么 react-native-keyboard-aware-scroll-view 不起作用，但如果你实现 react-native-keyboard-aware-view 你不应该有任何问题。

https://www.npmjs.com/package/react-native-keyboard-aware-view

原文由 wdlax11 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

个人通过使用 flex 解决了这个问题……

   <KeyboardAwareScrollView contentContainerStyle={{flex: 1}}>
    <View style={{flex: 1}}>

原文由 Dan Cork 发布，翻译遵循 CC BY-SA 3.0 许可协议