项目作者: dwicao

项目描述 :
A React Native Keyboard Space
高级语言: Objective-C
项目地址: git://github.com/dwicao/react-native-keyboard-space.git
创建时间: 2017-04-08T12:18:03Z
项目社区:https://github.com/dwicao/react-native-keyboard-space

开源协议:

下载


react-native-keyboard-space

demo

What is this?

  • On iOS, the software keyboard covers the screen by default.
  • This is not desirable if there are TextInput near the bottom of the screen - they would be covered by the keyboard and the user cannot see what they are typing.
  • To get around this problem, place a <KeyboardSpace ></KeyboardSpace> at the bottom of the screen, after your TextInput. The keyboard spacer has size 0 and when the keyboard is shown it will grow to the same size as the keyboard, shifting all views above it and therefore making them visible.

How is this different from KeyboardAvoidingView?

  • The KeyboardAvoidingView doesn’t work when used together with a ScrollView or ListView.

Running Example

  • git clone https://github.com/dwicao/react-native-keyboard-space.git
  • cd example
  • npm install
  • react-native run-android

Installation

  • npm install --save react-native-keyboard-space

Basic Usage

  1. import React, { Component } from 'react';
  2. import {
  3. StyleSheet,
  4. Text,
  5. View,
  6. TextInput,
  7. ScrollView,
  8. } from 'react-native';
  9. import KeyboardSpace from 'react-native-keyboard-space';
  10. class MyExample extends Component {
  11. render() {
  12. return (
  13. <View style={styles.container}>
  14. <ScrollView>
  15. {[...Array(50)].map((_, index) => (
  16. <Text key={index}>
  17. {index} This is ScrollView
  18. </Text>
  19. ))}
  20. </ScrollView>
  21. <TextInput style={styles.textInput}></TextInput>
  22. <KeyboardSpace ></KeyboardSpace>
  23. </View>
  24. );
  25. }
  26. }
  27. const styles = StyleSheet.create({
  28. container: {
  29. flex: 1,
  30. marginTop: 20,
  31. },
  32. textInput: {
  33. height: 50,
  34. width: 400,
  35. backgroundColor: 'gray',
  36. },
  37. });
  38. export default MyExample;

Credits

All credits goes to original author, I just make this repo for easy to use by importing from npm.

License

MIT