react-native 笔记 （1）

ios android 图片保存到本地

第一步 安装 依赖

    1. npm install @react-native-community/cameraroll   react-native-view-shot --save
    
    2. react-native link @react-native-community/cameraroll
    3. cd ios && pod install
    
    

这里遇到一个问题就是安装后 继续在 xcode 上 继续搭建 （这里是不需要的，会报错 library => build phases => link...）

第二步 项目里面引用 以及代码的实现

    1. import CameraRoll from '@react-native-community/cameraroll';
       import ViewShot from 'react-native-view-shot';
    
    2. 截图生成 ios:base64 ，android：file文件
    
    3. 保存本地的方法
    
        _getPost(){
            this.refs.viewShot.capture().then(uri => {
                CameraRoll.saveToCameraRoll(uri).then(result=>{
                    this.setState({
                        tips:false,
                    },()=>{
                        this.refs.hud.show('保存成功', 2);
                    });
                }).catch(error=>{
                    this.refs.hud.show('保存失败', 2);
                });
            });
        }
    
    4.  渲染出的页面
        <ViewShot ref='viewShot' options={{ format: 'jpg', quality: 0.9 ,  result: Platform.OS === 'ios' ? 'data-uri' : 'tmpfile'}}>
            <View style={styles.canvas_tip}></View>
        </ViewShot>

状态栏高度

import React, { Component } from 'react';
import {NativeModules,Platform,StatusBar} from 'react-native';
const { StatusBarManager } = NativeModules;
componentWillMount(){
    if (Platform.OS === 'ios'){
        StatusBarManager.getHeight(statusBarHeight => {
            console.log(statusBarHeight);
        });
    } else {
        const statusBarHeight = StatusBar.currentHeight;
        console.log(statusBarHeight);
    }
}

react-native-swiper

    ios 白屏闪现
    removeClippedSubviews={false} // 解决

    <Swiper 
        style={styles.swpiceImg}  
        showsButtons={false} 
        autoplay 
        key={img_arr.length}
        loop={true}
        removeClippedSubviews={false} // 解决
        dot={<View style={{backgroundColor:'rgba(0,0,0,.5)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />}
        activeDot={<View style={{backgroundColor: 'white', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}
    >
        {
            img_arr.map((activity, index) => {
                return (
                    <View key={'banner_' + index}>
                        <Image source={{uri:activity}} style={styles.swpiceImg}/>
                    </View>
                )
            })
        }
    </Swiper>

react-native 自动滚到屏幕顶部，模仿微信朋友圈评论自动定位

    <ScrollView

    showsVerticalScrollIndicator={false}

    style={[styles.column,styles.Flex]}

    ref={(r) => this.scrollview = r}

    //当控件被创建后将ScrollView这个对象的引用就传给了this.scrollview这个变量

    >

    </ScrollView>

    _(){ this.scrollview.scrollTo({x:0,y: 0,animated:true});} }

    <TouchableOpacity onPress={()=>this._}></TouchableOpacity>

仅供参考