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.先來一直最陋的圖：

2.再來整體的效果