react native 第一不行下载app的逆页+每次启动app的起步页设计。React Native 如何做轮播图 react-native-swiper



 欢迎各位同学在:
React-Native群:397885169
大前端群:544587175

大神超多,热情无私支援缓解各种问题。

style=”font-size: 16px;”>我眷恋自己写的就篇博文可以帮到很多丁,接下去要分享的东西,对app而言非常要紧,很广阔,我先行上图,大家看效果!

style=”font-size: 16px;”>图片 1图片 2


 

style=”font-size: 16px;”>为什么我们若这么做吧?这体现出对用户之和谐,当用户率先蹩脚采用我们的app的上,欢迎页能体现出我们app的学识,那么启动页的意也?这个就愈加重点了,由于我们的app要加载许多数量,启动页有一个缓过程,这个进程叫足够了app时间错开加载数据,用到起步页的app随处可见,比如说微信一样开行之死小人+大球。

style=”font-size: 16px;”>说了这样多,我们如果怎么用程序去贯彻他呢?其实也要命粗略,也很不简单。(我接下分享的马上段代码,还有bug,不过基本的法力已经落实)


 

//———————— style=”color: #000000;”>splashView.js—————————————//

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet,Animated,Dimensions } from 'react-native';
import GetSetStorge from '../utils/GetSetStorge';

const splashImg = require(‘../assets/guide/loding.png’);//加载图片

const { width, height } = Dimensions.get(‘window’);
// create a component
class splashView extends Component {
constructor(props) {
super(props);
this.state = { //这是动画效果
bounceValue: new Animated.Value(1)
};
}
componentDidMount() {
Animated.timing(
this.state.bounceValue, { toValue: 1.2, duration: 1000 }
).start();
this.timer = setTimeout(() => {
GetSetStorge.getStorgeAsync(‘isFrist’).then((result) => {
if (result == null || result == ”) {
//第一次启动
this.props.navigation.navigate(‘guideView’);
GetSetStorge.setStorgeAsync(‘isFrist’, ‘true’);
} else {
//第二糟开行s
this.props.navigation.navigate(‘MyTabNavigator’);
}
}).catch((error) => {
console.log(‘==========================’);
console.log(‘系统颇’ + error);
console.log(‘==========================’);
});
}, 1000);

}
componentWillUpdate = () => {
clearTimeout(this.timer);
}

render() {
return (

);
}
}

// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#2c3e50’,
},
});

//make this component available to the app
export default splashView;

style=”font-size: 16px;”>//————————————- style=”color: #000000;”>guideView.js————————————//

import React, { Component } from 'react';
import { Image, ScrollView, StyleSheet, Text, Dimensions, TouchableOpacity } from 'react-native';

let image1 = require(‘../assets/guide/splash.png’);
let image2 = require(‘../assets/guide/splash.png’);
let image3 = require(‘../assets/guide/splash.png’);

const { width, height } = Dimensions.get(‘window’);
export default class guideView extends Component {

constructor() {
super();
};
render() {
return (




{
this.props.navigation.navigate(‘MyTabNavigator’);
}}
>
启动应用


);
}
};
var styles = StyleSheet.create({
contentContainer: {
width: width * 3,
height: height,
},
backgroundImage: {
width: width,
height: height,
},
btnOut:{
alignItems:’center’,
},
btn:{
width:150,
height:50,
backgroundColor:’#90ee90′,
borderRadius:8,
justifyContent:’center’,
alignItems:’center’,
marginTop:550,

},
btnText:{
fontSize:18,
color:’#fff’
},
});

//—————————— style=”color: #000000;”>GetSetStorg.js————————————//

import {
    AsyncStorage,
} from 'react-native';

class GetSetStorge {
/**

     * 异步保存
     */
    setStorgeAsync(key, value) {
        return new Promise((resolve, reject) => {
            AsyncStorage.setItem(key, value, (error) => {
                if (error) {
                    console.log('==========================');
                    console.log(`设置${key}失败${error}`);
                    console.log('==========================');
                    reject(`设置${key}失败${error}`);
                } else {
                    console.log('==========================');
                    console.log(`设置${key}成功`);
                    console.log('==========================');
                    resolve(true);
                }
            });
        });
    }
    /**
     * 异步获取
     */
    getStorgeAsync(key) {
        return new Promise((resolve, reject) => {
            AsyncStorage.getItem(key, (error, result) => {
                if (error) {
                    console.log('==========================');
                    console.log(`读取${key}失败` + error);
                    console.log('==========================');
                    reject(`读取${key}失败${error}`);
                } else {
                    console.log('==========================');
                    console.log(`读取${key}成功`);
                    console.log('==========================');
                    resolve(result);
                }
            });
        });

}

}
export default new GetSetStorge();

 

 

笔者介绍:半路学IT,做开发3年,先下车于一如既往下共享单车店,做后台开发!

 我起了一个公众号,欢迎各位有志同道合朋友,关注!不定期分享工作,和自我得故事!

图片 3

style=”font-size: 16px;”>欢迎关注自己之博客,后打出五单开源项目如分享到自我之coding.net
和git上去!有问题要加微信:jkxx123321 本人愿意交流!

style=”font-size: 18px; color: #ff0000;”> style=”font-size: 18px; color: #ff0000;”>吁随意打赏

 

 

 图片 4

style=”font-size: 18px; color: #ff0000;”>(微信扫码)

 



style=”font-size: 16px;”>//:仿饿了么github:https://github.com/stoneWeb/elm-react-native

接各位同学在:
React-Native群:397885169
大前端群:544587175

大神超多,热情无私支援缓解各种问题。

style=”font-size: 16px;”>最近种需要需要动用轮播图,所以写点儿Demo练练手,不过效果不太理想,希望大牛予以指正。

不多说,先上图。

style=”font-size: 16px;”>图片 5

style=”font-size: 16px;”>这种轮播很普遍,但是一个问题是,总感觉到有点卡的发,最气人的凡,你滑动到哪里,他尽管听到哪里,给用户发十分不适!

下我分享一下该轮播的代码!

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, ScrollView } from 'react-native';
import Swiper from 'react-native-swiper';

let { width, height } = Dimensions.get(‘window’);
let Images = [
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) }
];
const loading = require(‘../assetsloading.gif’);

// create a component
class TargetView extends Component {
static navigationOptions = {
title: ‘目标’,
headerStyle: {
backgroundColor: ‘#FF3344’,
},
}

_renderSwiper() {
return (














)
}

render() {
return (

{this._renderSwiper()}

);
}
}

// define your styles
const styles = StyleSheet.create({
container: {
flex: 1
},
swiperStyle: {
marginTop:10,
width: width,
},
swiperItem: {
flex: 1,
justifyContent: ‘center’,
backgroundColor: ‘transparent’,
},
imageStyle: {
flex: 1,
width:width,
},
});

//make this component available to the app
export default TargetView;

仲单情景,先上同样摆设图

style=”font-size: 16px;”>图片 6

style=”font-size: 16px;”>都看到就是仿饿了么的轮播效果,但状态依然非常不爽,大牛给闹点优化建议啊!

style=”font-size: 16px;”>下面我享受一下欠轮播的机能,(如果您方做轮播,做的较好,谢谢分享自己瞬间,本人虚心学习,微信:jkxx123321)

//import liraries
import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Dimensions,
    Image,
    TouchableOpacity,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
    ScrollView,
    Platform,
    Animated,
} from 'react-native';
import Swiper from 'react-native-swiper';
import px2pd from '../utils/px2dp';

let { width, height } = Dimensions.get(‘window’);
const isIOS = Platform.OS == ‘ios’;
const headH = px2pd(isIOS ? 140 : 120);
const inputHeight = px2pd(28);

const imgTypes = [
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) },
{ src: require(‘../assets.jpg’) }
];
const loading = require(‘../assetsloading.gif’);

// create a component
class TargetView extends Component {
static navigationOptions = {
title: ‘目标’,
headerStyle: {
backgroundColor: ‘#FF3344’,
},
}
constructor(props) {
super(props)
this.state = {
location: “联锦大厦”,
}
}

_renderHeader() {
return (

{/*定位、天气*/}




{this.state.location}





{’20℃’}
{‘晴天’}




{/搜索框/}

{ }}>


{‘输入商家,商品名称’}




{
[‘肯德基’, ‘烤肉’, ‘吉野家’, ‘粥’, ‘必胜客’, ‘一品生煎’, ‘星巴克’].map((item, i) => {
return (


{item}


)
})
}


)
}

_renderTypes() {
const w = width / 4, h = w .6 + 20;
let renderSwipeView = (types, n) => {
return (

{
types.map((item, i) => {
let render = (

.5, height: w .5 }} />
{item}

)
return (
isIOS ? (
{ }}>{render}
) : (
{ }}>{render}
)
)
})
}

)
}
return (
2.4}
paginationStyle={{ bottom: 10 }}
dotStyle={{ backgroundColor: ‘rgba(0,0,0,.2)’, width: 6, height: 6 }}
activeDotStyle={{ backgroundColor: ‘rgba(0,0,0,.5)’, width: 6, height: 6 }}>
{renderSwipeView([‘美食’, ‘甜品饮品’, ‘商店超市’, ‘预定早餐’, ‘果蔬生鲜’, ‘新店特惠’, ‘准时达’, ‘高铁订餐’], 0)}
{renderSwipeView([‘土豪推荐’, ‘鲜花蛋糕’, ‘汉堡爆鸡’, ‘日韩料理’, ‘麻辣烫’, ‘披萨意面’, ‘川湘菜’, ‘包子粥店’], 8)}

)
}

render() {
return (


{this._renderHeader()}

{this._renderTypes()}



);
}
}

// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: ‘#f3f3f3’,
},
scrollView: {
marginBottom: px2pd(46),
},
header: {
backgroundColor: ‘#0398ff’,
height: headH,
paddingTop: px2pd(isIOS ? 30 : 10),
paddingHorizontal: 16,
},
lbsWeather: {
height: inputHeight,
overflow: “hidden”,
flexDirection: ‘row’,
justifyContent: ‘space-between’,
},
lbs: {
flexDirection: ‘row’,
justifyContent: ‘center’,
alignItems: ‘center’,
},
weather: {
flexDirection: ‘row’,
alignItems: ‘center’,
},
searchBtn: {
borderRadius: inputHeight,
height: inputHeight,
flexDirection: ‘row’,
backgroundColor: ‘#fff’,
justifyContent: ‘center’,
alignItems: ‘center’,
},
keywords: {
marginTop: px2pd(14),
flexDirection: ‘row’,
justifyContent: ‘space-between’,
},
typesView: {
paddingBottom: px2pd(10),
flex: 1,
backgroundColor: “#fff”,
flexDirection: “row”,
flexWrap: “wrap”
},
typesItem: {
backgroundColor: ‘#fff’,
justifyContent: ‘center’,
alignItems: ‘center’
},
});

//make this component available to the app
export default TargetView;

//———————px2dp.js——————————//

import { Dimensions } from ‘react-native’

const deviceH = Dimensions.get(‘window’).height
const deviceW = Dimensions.get(‘window’).width

const basePx = 375

export default function px2dp(px) {
return px * deviceW / basePx
}

 附一摆属于性表:

3.1 基本性

 

Prop Default Type Description
horizontal true bool 如果值为true时,那么滚动的内容将是横向排列的,而不是垂直于列中的。
loop true bool 如果设置为false,那么滑动到最后一张时,再次滑动将不会展示第一张图片。
index 0 number 初始进入的页面标识为0的页面。
showsButtons false bool 如果设置为true,那么就可以使控制按钮(即:左右两侧的箭头)可见。
autoplay false bool 设置为true,则页面可以自动跳转。

3.2 自定义属性

 

Prop Default Type Description
width number 如果你没有特殊的设置,就通过flex:1默认为全屏。
height number 如果你没有特殊的设置,就通过flex:1默认为全屏。
style {…} style 设置页面的样式。

3.3 pagination 分页

 

Prop Default Type Description
showsPagination true bool 默认值为true,在页面下边显示圆点,以标明当前页面位于第几个。
paginationStyle {…} style 设置页面原点的样式,自定义的样式会和默认样式进行合并。
renderPagination      
dot <View style={{backgroundColor:’rgba(0,0,0,.2)’, width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> element 可以自定义不是当前圆点的样式
activeDot <View style={{backgroundColor: ‘#007aff’, width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} /> element 可以自定义当前页面圆点的样式

3.4 自动播放

 

Prop Default Type Description
autoplay true bool 设置为true可以使页面自动滑动。
autoplayTimeout 2.5 number 设置每个页面自动滑动停留的时间
autoplayDirection true bool 圆点的方向允许默认自己控制

3.5 控制按钮

 

Prop   Default Type Description
showsButtons   true bool 是否显示控制箭头按钮
buttonWrapperStyle  
{position: 'absolute', paddingHorizontal: 15, 
paddingVertical: 30,  top: 70, left: 0, alignItems:'flex-start'}

style 定义默认箭头按钮的样式
nextButton  
<Text style={{fontSize:60, color:'#00a7ec',
 paddingTop:30, paddingBottom:30}}>‹</Text>
element 自定义右箭头按钮样式
prevButton  
<Text style={{fontSize:60, color:'#00a7ec', 
paddingTop:30, paddingBottom:30}}>›</Text>
element 自定义左箭头按钮样式

加油!

Leave a Comment.