react-native-keyboard-aware-scroll-view 无法正常工作 [英] react-native-keyboard-aware-scroll-view not working properly

问题描述

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

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

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

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';类 LoginIOS 扩展组件{构造函数(道具){超级(道具)；this.login = this.login.bind(this);this.renderScene = this.renderScene.bind(this);this.state={用户名: ''，密码: ''};}使成为() {返回 (<导航器renderScene={this.renderScene}导航器={this.props.navigator}导航栏={<Navigator.NavigationBar style={{backgroundColor: 'transparent'}}routeMapper={NavigationBarRouteMapper}/>}/>);}渲染场景(){返回 (<KeyboardAwareScrollView><视图样式={styles.container}><Spinner可见={this.state.visible}/><StatusBar barStyle="light-content" hidden={true}/><视图样式={styles.topContainer}><视图样式={styles.bannerContainer}><视图样式={{flexDirection: 'column', flex: 1, justifyContent: 'center', alignItems: 'center'}}><图片样式={styles.mark} source={require('***')}/></查看></查看><视图样式={styles.credentialContainer}><视图样式={styles.inputContainer}><图标样式={styles.inputPassword} name="person" size={28} color="#FFCD00"/><视图样式={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}><文本输入style={styles.input}占位符=用户名"自动更正={假}自动大写=无"returnKeyType="下一步"placeholderTextColor="#e0e0e0"onChangeText={(text) =>this.setState({用户名:文本})}值={this.state.username}></TextInput></查看></查看><视图样式={styles.inputContainer}><图标样式={styles.inputPassword} name="lock" size={28} color="#FFCD00"/><视图样式={{flexDirection: 'row', flex: 1, marginLeft: 2, marginRight: 2, borderBottomColor: '#e0e0e0', borderBottomWidth: 2}}><文本输入style={styles.input}占位符=密码"returnKeyType="完成"自动更正={假}安全文本条目={真}placeholderTextColor="#e0e0e0"onChangeText={(text) =>this.setState({密码: 文本})}值={this.state.password}onSubmitEditing={(事件)=>{this.login();}}></TextInput></查看></查看><TouchableOpacity style={styles.forgotContainer}></TouchableOpacity></查看></查看><TouchableHighlightunderlayColor="#D6AB00"onPress={this.login}style={styles.signInButtonContainer}><Text style={styles.signInText}>登录</Text></TouchableHighlight></查看></KeyboardAwareScrollView>);}

解决方案

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

https://www.npmjs.com/package/react-本机键盘感知视图

I am trying to use the react-native-keyboard-aware-scroll-view so the keyboard doesn't cover my inputs.

For some reason it always thinks there is a keyboard active I guess because it always compresses everything.

Attached is a picture of what is happening as well as the code. Any chance anyone has any idea whats happening here? I've been playing around with it for awhile and have had no luck. I'm running react-native v 0.33 and 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>

    );
  }

解决方案

I solved this problem by using another lib. Not sure why the react-native-keyboard-aware-scroll-view doesn't work but if you implement the react-native-keyboard-aware-view you shouldn't have any problems.

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

这篇关于react-native-keyboard-aware-scroll-view 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！