（四）[键盘遮挡优化与HTML文本显示和多图浏览]React Native 从零到构建Android与IOS应用发布

在登录页面时，我发现由于屏幕高度问题，我往往输入了内容后，由于键盘遮挡，看不到登录按钮，点击空白处也不能隐藏键盘，而且还不能拖动显示按钮（由于键盘并没有让高度增加），导致我没办法点击登录，只能关闭键盘才行，然后参考了下其他APP，发现点击input时，自动往上移动，当最后个输入框focus时，是可以看到登录按钮的，于是我就想通过keyboard事件来控制失去焦点时隐藏键盘，后来找到一篇文章提供了该类问题的解决方案。

http://m.blog.csdn.net/u012878818/article/details/77053688

然后试过该文上的其他几个组件，要么不行要么不好用，可能是我初入的原因没调试好，但时间紧急，总算是找到一个能用的，即该文中的

react-native-keyboard-aware-scroll-view 组件

npm i -g react-native-keyboard-aware-scroll-view --save

yarn add react-native-keyboard-aware-scroll-view

安装后，开始使用

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

定义事件，监听键盘显示和隐藏

componentWillMount () {

        this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));         this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));

}

_keyboardDidShow () {

    this._scroll.scrollToEnd(); // 滚动到底部

}

_keyboardDidHide () {

    this._scroll.scrollToPosition(0,0);  // 返回到顶部

}

在render时：

    ref={(scroll)=>this._scroll = scroll}

    style={{padding:20,backgroundColor:'#ffffff',flex:1}}

    resetScrollToCoords={{ x: 0, y: 0 }}

    contentContainerStyle={styles.container}

    scrollEnabled={true}

>

// .... 你的表单内容

但该组件在IOS下表现比较完美，安卓下却不那么好，主要是安卓下点击另一个input时，第一次点击是隐藏键盘，第二次点击另一个input才会触发keyboardDidShow方法，IOS下没有这个问题，等有空了再来看看如何优化

---

然后我发现我的数据中，包含了Html格式的内容，无法使用到RN中，百度了一下，找到组件HTMLView

方法很简单

npm i -g react-native-htmlview --save

yarn add react-native-htmlview

先安装然后import

import HTMLView from 'react-native-htmlview';

然后使用

   

---

然后详情页还发现一个问题，我有多张图片，需要一个类似相册集的东西，再次百度，发现了几个组件，觉得其他几个比较麻烦，所以我使用了

react-native-photo-browser

老规矩，先安装

npm i -g react-native-photo-browser--save

yarn add react-native-photo-browser

然后新建一个screen的component

import PhotoBrowser from 'react-native-photo-browser';

class PhotoBrowserScene extends Component {

    static navigationOptions = { //1.隐藏导航头部 header: null, };

    render() {

        //3.获取传入的图片等信息

        const { params } = this.props.navigation.state; // 通过navigation的params来获取图片数据

        const media = params.media;

        const index = 0;

        return (

           

        );

    }

}

export default PhotoBrowserScene;

定义好后加入StackNavigator中定义名为photo的Screen

Photo:{

    screen:PhotoBrowserScene

}

然后就可以使用啦，主要是图片列表中的TouchableOpacity组件onPress

{

        if(data.images_data.length>0){

            let photos = new Array;for(var i=0;i

                    photos.push({photo:data.images_data[i]});

                }

            navigation = this.props.navigation;

            navigation.navigate('Photo',{media:photos,index:0});

        }

}}

removeClippedSubviews={false}

enableEmptySections={true}

>

    {images}

通过navigation的navigate方法，跳转到Photo导航 并传递params：media数据 ，media是一个图片list