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

转载请标明出处: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.先来一直最陋的图：

2.再来整体的效果