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

Answer 1

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

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

- Dan Cork

---

在contentContainerStyle中，将flex: 1替换为flexGrow: 1适用于我的情况。 - Prasad Kavinda

Answer 2

为了让它在Android上使用Expo运行，我不得不添加一些东西，希望这能帮到你。

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

- Furquan

---

你为我节省了几个小时的时间） - Mher

Answer 3

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

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

- wdlax11

Answer 4

如果您仍然在解决此问题，我所采取的方法是确保将enableOnAndroid = true并在keyboardAwareScrollView中设置一个marginBottom。

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

- Solly

---

如果键盘不恰好是150像素，这个会失败吗？ - Lazerbeak12345

@Lazerbeak12345 这不是最好的解决方案，但它适用于我正在开发的应用程序。实现 extraScrollHeight 是更好的选择，我相信文档中也建议了这样做。尝试 extraScrollHeight={150}。 - Solly

Answer 5

您还可以使用动画视图作为滚动视图无法具有绝对视图或固定组件。因此，监听键盘事件并进行调整将运行良好。

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();
}

- Adarsh Kumar

---

什么是 em(64)？ - VishAl

这是一个函数，根据屏幕尺寸重新校准高度和宽度。 - Adarsh Kumar

Answer 6

适合我的设置

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

- Aaron

Answer 7

我在iOS上遇到了这个问题，但是我已经解决了。

<KeyboardAwareScrollView
extrScrollHeight={-100}>
....your code
</KeyboardAwareScrollView>

希望这能有所帮助！

- Sunday David

Answer 8

 showsVerticalScrollIndicator={false}
bounces={false}
behavior={'padding'}
keyboardShouldPersistTaps="handled"
enableOnAndroid={true}
extraHeight={150}
extraScrollHeight={20}
alwaysBounceVertical={false}
keyboardOpeningTime={Number.MAX_SAFE_INTEGER}
scrollEnabled={props.scrollEnabled}
enableAutomaticScroll={true}
contentContainerStyle={props?.style}
style={{backgroundColor: Colors.background.primary}}

- Umer Arain

Answer 9

我将React Native版本升级到0.59.4，但KeyboardAwareScrollView的正常工作已经停止。显然，这些属性现在是必需的：

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

- nrm97

Answer 10

所有这些帖子都已过时或对我无效。

react-native-aware-scroll-view存在许多问题，而且几乎没有维护。

我已经在这里回答了这个问题，并提供了对我有效的解决方案（可能是重复的）：https://dev59.com/aHkPtIcB2Jgan1znqc4W#73678502

- Ovidiu Cristescu