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>

    );
  }

Answer 1

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

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

Answer 2

通过使用flex ...

亲自解决了这个问题

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

Answer 3

如果有人仍在努力解决此问题。对我有用的是确保enableOnAndroid = true并在keyboardAwareScrollView内设置一个marginBottom。

<KeyboardAwareScrollView style={{width: "90%",marginBottom:150}} enableOnAndroid={true}>

Answer 4

您也可以使用动画视图，因为滚动视图不能具有绝对视图或固定组件。所以听取键盘事件并使调整工作正常。

onKeyboarDidShow(e) {
  //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  Animated.timing(this.relativeBottom, {
    duration: e.duration,
    toValue: Dimensions.get('window').height-em(64)-e.endCoordinates.height
  }).start()
}

onKeyboardWillHide(e) {
  //LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
  Animated.timing(this.relativeBottom, {
    duration: e.duration,
    toValue: Dimensions.get('window').height-em(64)
  }).start()
}

componentWillMount() {
    this._didShowListener = Keyboard.addListener('keyboardWillShow', this.onKeyboarDidShow.bind(this));
    this._willHideListener = Keyboard.addListener('keyboardWillHide', this.onKeyboardWillHide.bind(this));
}

componentWillUnmount() {
    this._didShowListener.remove();
    this._willHideListener.remove();
}

Answer 5

要使其在EXPO的android系统中正常工作，我还必须添加一些内容，希望对您有所帮助

<KeyboardAwareScrollView extraScrollHeight={100} enableOnAndroid={true} 
   keyboardShouldPersistTaps='handled'>
       <ScrollView>
      </ScrollView>
</KeyboardAwareScrollView>

Answer 6

我将react-native版本升级到0.59.4，而KeyboardAwareScrollView停止照常工作。显然，此道具现在是必需的：

<KeyboardAwareScrollView
scrollEnabled={true}
enableAutomaticScroll={true}>

Answer 7

像这样给父视图高度

height:Dimensions.get('window').height

使用 flex:1 将结束内容。

Answer 8

只需添加resetScrollToCoords、contentContainerStyle（样式表不需要命名为container）和scrollEnabled（您可以将其设置为true，我觉得这样更有用）。它会正常工作并且很合身！

import React from 'react';
import { View, TextInput, Image } from 'react-native';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
import styles from './styles';
import logo from './logo.png';

const Demo = () => {
  return (
    <KeyboardAwareScrollView
      style={{  }}
      resetScrollToCoords={{ x: 0, y: 0 }}
      contentContainerStyle={styles.container}
      scrollEnabled={false}
    >
        <Image source={logo} style={styles.logo} />
        <TextInput
          placeholder="Email"
          style={styles.input}
        />
        <TextInput
          placeholder="Username"
          style={styles.input}
        />
        <TextInput
          placeholder="Password"
          style={styles.input}
        />
        <TextInput
          placeholder="Confirm Password"
          style={styles.input}
        />
    </KeyboardAwareScrollView>
  );
};


let styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "column"
    },
}),

export default Demo;

Answer 9

对我有用的设置

    bounces={false}
    showsVerticalScrollIndicator={false}
    style={{marginBottom:150}}
    enableOnAndroid={true}
    scrollEnabled={true}
    extraScrollHeight={100}
    keyboardShouldPersistTaps='handled'
    scrollToOverflowEnabled={true}
    enableAutomaticScroll={true}

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

9 个答案: