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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010046908/article/details/50805177

转载请标明出处:http://blog.csdn.net/u010046908/article/details/50805177 本文出自:【李东的博客】

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

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

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

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

接下来写AndroidViewPager

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

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

<ViewPagerAndroid
      style={styles.viewPager}
      initialPage={0}>
      <View style={styles.pageStyle} >
        <Image source={require('./image/guide1.png')}
        style={styles.image}
         />
      </View>
      <View style={styles.pageStyle}>
          <Image source={require('./image/guide2.png')}
          style={styles.image}
       />
      </View>
      <View style={styles.pageStyle}>
          <Image source={require('./image/guide3.png')} 
            style={styles.image} >
            </Image>
      </View>
    </ViewPagerAndroid>

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

class NavButton extends React.Component { 

   render() { 
     return ( 
       <TouchableHighlight 
        style={styles.button} 
        underlayColor="#B5B5B5" 
        onPress={this.props.onPress}> 
         <Text style={styles.buttonText}>{this.props.text}</Text> 
      </TouchableHighlight> 
     ); 
   } 
 } 

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

 <View style={styles.pageStyle}>
          <Image source={require('./image/guide3.png')} 
            style={styles.image} >
            </Image>
             <NavButton
            onPress={() => {
        ToastAndroid.show('启动应用', ToastAndroid.SHORT);
          }}
          text="启动应用"
          style={styles.button1}  />
      </View>

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

<View style={styles.pageStyle}>
          <Image source={require('./image/guide3.png')} 
            style={styles.image} >
              <NavButton
            onPress={() => {
     ToastAndroid.show('启动应用',ToastAndroid.SHORT);       
          }}
          text="启动应用"
          style={styles.button1}  />
            </Image>  
      </View>
    </ViewPagerAndroid>

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

最后将整体的代码:

/**
 * HelloWorld1 Native App
 * https://github.com/facebook/react-native
 * @author:lidong
 * @date:2016-02-28
 */
'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  Navigator,
  TouchableHighlight,
  TouchableOpacity,
  ToastAndroid,
   ViewPagerAndroid,
   Image,
  View
} from 'react-native';

class NavButton extends React.Component { 

   render() { 
     return ( 
       <TouchableHighlight 
        style={styles.button} 
        underlayColor="#B5B5B5" 
        onPress={this.props.onPress}> 
         <Text style={styles.buttonText}>{this.props.text}</Text> 
      </TouchableHighlight> 
     ); 
   } 
 } 

class HelloWorld1 extends Component {

  render(){
    return (
       <ViewPagerAndroid
      style={styles.viewPager}
      initialPage={0}>
      <View style={styles.pageStyle} >
        <Image source={require('./image/guide1.png')}
        style={styles.image}
         />
      </View>
      <View style={styles.pageStyle}>
          <Image source={require('./image/guide2.png')}
          style={styles.image}
       />
      </View>
      <View style={styles.pageStyle}>
          <Image source={require('./image/guide3.png')} 
            style={styles.image} >
             <NavButton
            onPress={() => {
              ToastAndroid.show('启动应用', ToastAndroid.SHORT);

          }}
          text="启动应用"
          style={styles.button1}  />
            </Image>
      </View>
    </ViewPagerAndroid>
    );
  }
 };

//React Native组件的生命周期,经历了Mount->Update->Unmount这三个大的过程,即从创建到销毁的过程

const styles = StyleSheet.create({
   viewPager: {
     flex: 1,
     // justifyContent: 'center',
     // alignItems: 'center',
     backgroundColor: '#F5FCFF',
   },
   pageStyle: {
    flex: 1,
    alignItems: 'stretch',
    justifyContent: 'center',
     position:'relative',
  },
   image: {
    flex: 1,
    justifyContent:'flex-end',
    alignItems:'center',
    paddingBottom:50,
  },
  button1:{
    width:200,
    alignSelf: 'flex-end',
    justifyContent:'flex-end',
  },
  messageText: {
    fontSize: 27,
    fontWeight: '500',
    padding: 15,
    marginTop: 50,
    marginLeft: 15,
  },
  button: {
    backgroundColor: 'white',
    padding: 15,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#CDCDCD',
    alignSelf:'center',
  },
 });

AppRegistry.registerComponent('HelloWorld1', () => HelloWorld1);

最后上图了:

1.先来一直最陋的图:
React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用

2.再来整体的效果
React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用React-Native 如何将图片作为页面的背景以及控件的嵌套实现启动应用

上一篇:搜索引擎如何判断内容相关性


下一篇:ecshop销售排行显示销售量