react-native坑

1.图标类展示大小问题将父窗口何子窗口属性设定如下即可完成不变形展示：

 type:{
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center',
        backgroundColor:'#fff'
    },
    typeimage:{
        width:110,
        height:110
    }

2.轮播加上自图标展示如下:

import React, { Component } from 'react'
import {
    Text,
    View,
    Image,
    Dimensions,
    ScrollView
} from 'react-native'
import Menu, { MenuContext, MenuOptions, MenuOption, MenuTrigger } from 'react-native-menu';
import Swiper from 'react-native-swiper'
const { width } = Dimensions.get('window')
export default class SwiperDemo extends Component {
    render() {
        return (
            // 轮播
            <ScrollView>
            <View style={styles.container}>
                <Swiper style={styles.wrapper} height={200} horizontal={true} autoplay={ true } activeDot={<View style={{backgroundColor: 'white', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3}} />}>
                    <View style={styles.slide1}>
                        <Image resizeMode='stretch' style={styles.image} source={require('./images/3.png')} />
                    </View>
                    <View style={styles.slide2}>
                        <Image resizeMode='stretch' style={styles.image} source={require('./images/2.png')} />
                    </View>
                    <View style={styles.slide3}>
                        <Image resizeMode='stretch' style={styles.image} source={require('./images/1.png')} />
                    </View>
                    <View style={styles.slide3}>
                        <Image resizeMode='stretch' style={styles.image} source={require('./images/1.png')} />
                    </View>
                </Swiper>
            </View>
                <View style={styles.indextype}>
                    <View style={styles.type}>
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_02.png')} />
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_03.png')} />
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_04.png')} />
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_05.png')} />
                    </View>
                    <View style={styles.type}>
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_06.png')} />
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_07.png')} />
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_08.png')} />
                        <Image resizeMode='contain' style={styles.typeimage} source={require('./images/home1_09.png')} />
                    </View>
                </View>
            </ScrollView>
        )
    }
}

const styles = {
    container: {
        //height:200
    },

    wrapper: {
    },

    slide: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: 'transparent'
    },

    slide1: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#9DD6EB'
    },

    slide2: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#97CAE5'
    },

    slide3: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#92BBD9'
    },

    text: {
        color: '#fff',
        fontSize: 30,
        fontWeight: 'bold'
    },

    image: {
        width:width,
        height:220

    },
    indextype: {
        width:width,
    },
    type:{
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center',
        backgroundColor:'#fff'
    },
    typeimage:{
        width:110,
        height:110
    }
}

3.效果图