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

最近一直非常的关注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,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',messageText: {
    fontSize: 27,fontWeight: '500',padding: 15,marginTop: 50,marginLeft: 15,button: {
    backgroundColor: 'white',borderBottomWidth: StyleSheet.hairlinewidth,borderBottomColor: '#CDCDCD',alignSelf:'center',});

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

最后上图了:

1.先来一直最陋的图：

2.再来整体的效果

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