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 自定义左箭头按钮样式

加油!

相关文章