文档章节

react native react-native-parallax-scroll-view的api

o
 osc_y8yehimr
发布于 2019/03/20 10:31
字数 420
阅读 17
收藏 0

钉钉、微博极速扩容黑科技,点击观看阿里云弹性计算年度发布会!>>>

<ParallaxScrollView
backgroundColor="transparent"
contentBackgroundColor="transparent"
headerBackgroundColor="#333"
stickyHeaderHeight={40}
parallaxHeaderHeight={250}
backgroundSpeed={10}
//设置头部背景图片
renderBackground={() => (
<View key="background">
<Image source={require('../../assets/home/de.png')}
imageStyle={{resizeMode: Image.resizeMode.stretch}}
style={{
width: width,
height: 250,
}}>
</Image>
<View style={{ position: 'absolute', top: 0, width: window.width, backgroundColor: 'rgba(0,0,0,.4)', height: 250 }}/>
</View>
)
}
//自定义头部内容
renderForeground={() => (
<View style={{
width: width,
height: 250,
justifyContent: 'center'
,marginTop:30
}}>
<View style={{flex:1,alignItems:'center'}}>
<Text
style={{color:'white',fontSize:28,marginTop:50}}>BTC</Text>
</View>
<View style={{flexDirection:'row',flex:1}}>
<View style={{flex:1}}>
<Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 93,943.44</Text>
<Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}>总资产</Text>
</View>
<View style={{flex:1}}>
<Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}>93,943.44</Text>
<Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 可用资产</Text>
</View>
<View style={{flex:1}}>
<Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 93,943.44 </Text>
<Text style={{paddingVertical: 5 ,textAlign:'center',color:'white'}}> 冻结资产</Text>
</View>
</View>
</View>
)
}
//导航栏标题
renderStickyHeader={() => (
<PageHeader isHome={true} leftButtonPress={null} rightText={null} rightIcon={null} isShowRight={true} leftIcon={null} title="英大金融展业平台" />
)
}
//固定的导航栏样式
renderFixedHeader ={ () => (
<PageHeader isHome={true} leftButtonPress={null} rightText={null} rightIcon={null} isShowRight={true} leftIcon={null} title="英大金融展业平台" />
)
}
>

<View style={styles.bannerBox}>
<Swiper
style={styles.wrapper}
height={width * 35 / 75}
autoplayTimeout={2.5}
// showButtons —— 是否显示左右翻页按钮
showsButtons={false}
// autoPlay —— 是否自动播放
autoplay={true}
// paginationStyle —— 包含小点点的容器的样式,这里用来调整位置
paginationStyle={styles.paginationStyle}
// dotStyle —— 小点点的样式
dotStyle={styles.dotStyle}
// activeDotStyle —— 当前被激活的小点点的样式
activeDotStyle={styles.activeDotStyle}
>
<Image source={require('../../assets/home/banner.jpg')} style={styles.bannerImg}/>

</Swiper>
</View>
<View style={styles.entry}>
<Text style={styles.title}>展业入口</Text>
<View style={styles.entryBox}>
<View style={styles.logoBox}>
<Image source={require('../../assets/home/logo.png')} style={styles.logoImg}/>
<Text style={styles.logoName}>英大人寿</Text>
</View>
<Text style={styles.desc}>英大人寿移动展业平台</Text>
<Image source={require('../../assets/home/arrow.png')} style={styles.arrow}/>
</View>

</View>
<View style={styles.news}>
<Text style={styles.title}>行业动态</Text>
</View>
<View style={styles.newsBox}>
<FlatList
data={this.state.data}
renderItem={this.renderNews}
style={styles.list}
keyExtractor={item => item.id}
/>
</View>
</ParallaxScrollView>

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
React Native 常用第三方组件

React-Native-Elements 一组开发RN的UI工具包(强烈推荐) 🔥🔥🔥🔥🔥 react-native-calendars 🔥🔥🔥🔥 优秀的日历控件 apsl-react-native-button 定义了一个Button支持用...

osc_gz5w458v
2018/11/10
31
0
史上最全react-native常用第三方组件汇总

本文出处: http://blog.csdn.net/chichengjunma/article/details/52920137 React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native......

osc_qp7oxc3y
2018/12/29
6
0
解决react-native软键盘弹出挡住输入框的问题

解决react-native软键盘弹出挡住输入框的问题 写登录页面,整体界面居中之后就出现软键盘弹出挡住输入框,用户体验不好的情况。用了RN官方的KeyboardAvoidingView组件,会有多出来一块灰色区...

osc_mo4m2o49
2018/09/10
18
0
react-native-gesture-handler 使用

安装 link到原生项目中 为什么写这个文档 官方文档看的难受。React Native Gesture Handler 官网文档 为什么要使用这个库 更加的流畅、可靠。 react-native自带的PanResponder手势监视器由J...

osc_eibr31r7
04/16
31
0
React Native开发之动画

博主这个系列的文章 React Native开发之IDE(Atom+Nuclide) React Native开发之FlexBox代码+图解 React Native的Navigator详解 另外,我在Github上建立了一个仓库来搜集优秀的React Nativ...

Yomut
2016/06/29
400
0

没有更多内容

加载失败,请刷新页面

加载更多

Kubernetes发布SpringBoot项目过程总结

SpringBoot 项目创建完成后,通常会打成 jar 包运行,如果不使用 Kubernetes 可以直接通过 java -jar 或者脚本启动,如果需要发布到 Kubernetes 环境,那么需要编写 Dockerfile、构建镜像、推...

strict_nerd
05/23
0
0
👉 最新推出【Jenkins扩展篇-API实践|监控】教程🎉🎉🎉 助力全方位Jenkins管理!课程详情可添加小助手微信: proc_code。

本文分享自微信公众号 - DevOps云学堂(idevopsvip)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

泽阳DevOps
02/18
0
0
没错,用三方 Github 做授权登录就是这么简单!(OAuth2.0实战)

本文收录在个人博客:www.chengxy-nds.top,技术资源共享。 上一篇《OAuth2.0 的四种授权方式》文末说过,后续要来一波OAuth2.0实战,耽误了几天今儿终于补上了。 最近在做自己的开源项目(f...

程序员内点事
30分钟前
29
0
Docker可视化工具Portainer

前言 对于新手来说,还是要熟悉并掌握Docker命令,因为它的命令还是非常清晰简单的。随着逐渐熟悉命令后,为了提高工作效率我们可以考虑借助一些工具协助。目前业界对于Docker可视化工具比较...

ville
33分钟前
29
0
从 Git 仓库的 Commit 历史中移除敏感文件

在很多情况,我们由于疏忽会将一些敏感信息误传到 Git 仓库上面去。 尽管我们可以使用git rm将包含敏感信息文件删除掉,然后重新提交上传,文件就不会在仓库文件列表显示。 但是这并不能完全...

A_laoshiren
39分钟前
35
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部