在登录页面时，我发现由于屏幕高度问题，我往往输入了内容后，由于键盘遮挡，看不到登录按钮，点击空白处也不能隐藏键盘，而且还不能拖动显示按钮（由于键盘并没有让高度增加），导致我没办法点击登录，只能关闭键盘才行，然后参考了下其他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时：
<KeyboardAwareScrollView
ref={(scroll)=>this._scroll = scroll}
style={{padding:20,backgroundColor:'#ffffff',flex:1}}
resetScrollToCoords={{ x: 0, y: 0 }}
contentContainerStyle={styles.container}
scrollEnabled={true}
>
// .... 你的表单内容
</KeyboardAwareScrollView>
但该组件在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';
然后使用
<View>
<HTMLView value={data.htmlContent} />
</View>
然后详情页还发现一个问题，我有多张图片，需要一个类似相册集的东西，再次百度，发现了几个组件，觉得其他几个比较麻烦，所以我使用了
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 (
<PhotoBrowser onBack={this._goBack} mediaList={media} initialIndex={index} displayActionButton={true} displayTopBar={true} />
);
}
}
export default PhotoBrowserScene;
定义好后加入StackNavigator中定义名为photo的Screen
Photo:{
screen:PhotoBrowserScene
}
然后就可以使用啦，主要是图片列表中的TouchableOpacity组件onPress
<TouchableOpacity style={styles.ListViewStyle} onPress={()=>{
if(data.images_data.length>0){
let photos = new Array;for(var i=0;i<data.images_data.length;i++){
photos.push({photo:data.images_data[i]});
}
navigation = this.props.navigation;
navigation.navigate('Photo',{media:photos,index:0});
}
}}
removeClippedSubviews={false}
enableEmptySections={true}
>
<ScrollView horizontal={true}>{images}</ScrollView>
</TouchableOpacity>
通过navigation的navigate方法，跳转到Photo导航 并传递params：media数据 ，media是一个图片list
