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

曾经终败给现在 2022-08-20 15:22 23阅读 0赞

转载请标明出处:[http://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 ###

### 其中用到了自定义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.先来一直最陋的图：  
![最陋的图][20160304200248063]

2.再来整体的效果  
![View1][]![View2][]![View3][]

[http_blog.csdn.net_u010046908_article_details_50805177]: http://blog.csdn.net/u010046908/article/details/50805177
[20160304200248063]: /images/20220731/af658ac039b140d5b4d8f05e44edc455.png
[View1]: https://img-blog.csdn.net/20160304200404516
[View2]: https://img-blog.csdn.net/20160304200425970
[View3]: /images/20220731/a3fab3d21bbf401daee1f07f3fc5179e.png