React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用

前端之家收集整理的这篇文章主要介绍了React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转载请标明出处:http://www.jb51.cc/article/p-tvkpdkcc-rd.html 本文出自:【李东的博客

最近一直非常的关注react-native的开发,每天都会看到江清清技术专栏中关于react-native的 使用,基本上从搭建开发环境到版本的升级与降级等技术有了一定的了解,也学习一些简单控件的使用,如Image,Text,View,AndroidViewPager等使用,于是实现一个应用的引导页,但是遇到一个简单但有不知从何实现的问题,就是如何给一个view做背景和如何在一个背景图片中放一个button作为启动应用的入口。在这里纠结了好半天,在江哥的群中也讨教了他们,还没能找方法。于是就想到web开发中的div的嵌套,于是想控件原来是可以嵌套使用的。最后让的实现了功能。今天将其记录一下。

使用AndroidViewPager来实现View页面的切换

准备三张图片。然后将要使用的控件导入

  1. import React,{
  2. AppRegistry,Component,StyleSheet,Text,Navigator,TouchableHighlight,TouchableOpacity,ToastAndroid,ViewPagerAndroid,Image,View
  3. } from 'react-native';

接下来写AndroidViewPager

  1. <ViewPagerAndroid style={styles.viewPager} initialPage={0}>//设置默认选中第一个View
  2. </ViewPagerAndroid>

向AndroidViewPager添加三个View,并且将图片控件也添加到View

  1. <ViewPagerAndroid style={styles.viewPager} initialPage={0}>
  2. <View style={styles.pageStyle} >
  3. <Image source={require('./image/guide1.png')} style={styles.image} />
  4. </View>
  5. <View style={styles.pageStyle}>
  6. <Image source={require('./image/guide2.png')} style={styles.image} />
  7. </View>
  8. <View style={styles.pageStyle}>
  9. <Image source={require('./image/guide3.png')} style={styles.image} >
  10. </Image>
  11. </View>
  12. </ViewPagerAndroid>

其中用到了自定义Button,由于react-native没有提供button控件。

  1. class NavButton extends React.Component {
  2.  
  3. render() {
  4. return (
  5. <TouchableHighlight
  6. style={styles.button}
  7. underlayColor="#B5B5B5"
  8. onPress={this.props.onPress}>
  9. <Text style={styles.buttonText}>{this.props.text}</Text>
  10. </TouchableHighlight>
  11. );
  12. }
  13. }

接下来,问题来了,一直将Image方法到View中做为了背景,但是还有一个按钮,不知道怎么放该开始,是这样放的:

  1. <View style={styles.pageStyle}>
  2. <Image source={require('./image/guide3.png')} style={styles.image} >
  3. </Image>
  4. <NavButton onPress={() => {
  5. ToastAndroid.show('启动应用',ToastAndroid.SHORT);
  6. }}
  7. text="启动应用"
  8. style={styles.button1} />
  9. </View>

一直想不到组件的嵌套,于是想了好半天,想到web中div的嵌套等,于是将button放Image里面,结果奇迹来了,确实实现了效果

  1. <View style={styles.pageStyle}>
  2. <Image source={require('./image/guide3.png')} style={styles.image} >
  3. <NavButton onPress={() => {
  4. ToastAndroid.show('启动应用',ToastAndroid.SHORT);
  5. }}
  6. text="启动应用"
  7. style={styles.button1} />
  8. </Image>
  9. </View>
  10. </ViewPagerAndroid>

就这样,基本上说明白了,我们以后不能太死板,应该灵活的各种尝试。尽可能肯能全方位的思考,尤其是接触到新的问题的时候。最终才能实现我的效果

最后将整体的代码

  1. /** * HelloWorld1 Native App * https://github.com/facebook/react-native * @author:lidong * @date:2016-02-28 */
  2. 'use strict';
  3. import React,View
  4. } from 'react-native';
  5.  
  6. class NavButton extends React.Component {
  7.  
  8. render() {
  9. return (
  10. <TouchableHighlight
  11. style={styles.button}
  12. underlayColor="#B5B5B5"
  13. onPress={this.props.onPress}>
  14. <Text style={styles.buttonText}>{this.props.text}</Text>
  15. </TouchableHighlight>
  16. );
  17. }
  18. }
  19.  
  20. class HelloWorld1 extends Component {
  21.  
  22. render(){
  23. return (
  24. <ViewPagerAndroid
  25. style={styles.viewPager}
  26. initialPage={0}>
  27. <View style={styles.pageStyle} >
  28. <Image source={require('./image/guide1.png')}
  29. style={styles.image}
  30. />
  31. </View>
  32. <View style={styles.pageStyle}>
  33. <Image source={require('./image/guide2.png')}
  34. style={styles.image}
  35. />
  36. </View>
  37. <View style={styles.pageStyle}>
  38. <Image source={require('./image/guide3.png')}
  39. style={styles.image} >
  40. <NavButton
  41. onPress={() => {
  42. ToastAndroid.show('启动应用',ToastAndroid.SHORT);
  43.  
  44. }}
  45. text="启动应用"
  46. style={styles.button1} />
  47. </Image>
  48. </View>
  49. </ViewPagerAndroid>
  50. );
  51. }
  52. };
  53.  
  54. //React Native组件的生命周期,经历了Mount->Update->Unmount这三个大的过程,即从创建到销毁的过程
  55.  
  56. const styles = StyleSheet.create({
  57. viewPager: {
  58. flex: 1,// justifyContent: 'center',
  59. // alignItems: 'center',
  60. backgroundColor: '#F5FCFF',},pageStyle: {
  61. flex: 1,alignItems: 'stretch',justifyContent: 'center',position:'relative',image: {
  62. flex: 1,justifyContent:'flex-end',alignItems:'center',paddingBottom:50,button1:{
  63. width:200,alignSelf: 'flex-end',messageText: {
  64. fontSize: 27,fontWeight: '500',padding: 15,marginTop: 50,marginLeft: 15,button: {
  65. backgroundColor: 'white',borderBottomWidth: StyleSheet.hairlineWidth,borderBottomColor: '#CDCDCD',alignSelf:'center',});
  66.  
  67. AppRegistry.registerComponent('HelloWorld1',() => HelloWorld1);

最后上图了:

1.先来一直最陋的图:

2.再来整体的效果

猜你在找的React相关文章