ReactNative学习记录

最新推荐文章于 2024-01-30 17:31:26 发布

黑化白菜可

最新推荐文章于 2024-01-30 17:31:26 发布

阅读量182

点赞数 1

分类专栏：前端文章标签： RN

本文链接：https://blog.csdn.net/qq_43211489/article/details/100174451

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

滚动条

横向滚动：

//在ScrollView里面加上这段代码即可
 horizontal={true}

隐藏滚动条：

//隐藏水平
showsHorizontalScrollIndicator = {false}
//隐藏垂直
showsVerticalScrollIndicator = {false}

轮播图示例

先导入：

$ npm install react-native-swiper --save
$ npm i react-timer-mixin --save

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
} from 'react-native';
import Dimensions from 'Dimensions';
import Swiper from 'react-native-swiper';

var screenWidth = Dimensions.get('window').width;

export default class SwiperScreen extends Component {
    render() {
        return (
            <View style={styles.lunbotu}>
                <Swiper
                    style={styles.wrapper}
                    height={240}
                    autoplay={true}
                    loop={true}
                    keyExtractor={(item, index) => index + ''}
                    index={1}
                    autoplayTimeout={3}
                    horizontal={true}
                    onMomentumScrollEnd={(e, state, context) => {
                    }}
                    dot={<View style={styles.dotStyle}/>}
                    activeDot={<View style={styles.activeDotStyle}/>}
                    paginationStyle={{
                        bottom: 10
                    }}>
                    <View>
                        <Image style={{width: screenWidth, height: 150}}
                               resizeMode="stretch"
                               source={{uri: ''}}>
                        </Image>
                    </View>
                    <View>
                        <Image style={{width: screenWidth, height: 150}}
                               resizeMode="stretch"
                               source={{uri: ''}}>
                        </Image>
                    </View>
                    <View>
                        <Image style={{width: screenWidth, height: 150}}
                               resizeMode="stretch"
                               source={{uri: ''}}>
                        </Image>
                    </View>
                </Swiper>
            </View>
        );
    }

}


const styles = StyleSheet.create({
    dotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        opacity: 0.4,
        borderRadius: 0,
    },
    activeDotStyle: {
        width: 22,
        height: 3,
        backgroundColor: '#fff',
        borderRadius: 0,
    },
    lunbotu: {
        height: 120,
        backgroundColor: '#222222'
    },

});

渐变色

先安装：

 yarn add react-native-linear-gradient
 react-native link react-native-linear-gradient

import React, {Component} from 'react';
import {
    Image,
    View,
    Text,
    StyleSheet
} from 'react-native';

import LinearGradient from "react-native-linear-gradient";

export default class LinearGradientScreen extends Component {

    render() {
        return (
            <View style={{height: '100%'}}>
                <LinearGradient colors={['red', 'green', 'blue']} style={styles.container}>

                </LinearGradient>
            </View>
        );

    }
}

const styles = StyleSheet.create({
    container: {
        height: '100%'
    }
})

ScrollableTabView默认页面

标签内加上initialPage并赋值下标即可

render() {
    return (
        <ScrollableTabView
            initialPage={1}>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

ScrollableTabView背景颜色

标签内加上tabBarBackgroundColor并赋值即可

render() {
    return (
        <ScrollableTabView
            tabBarBackgroundColor='#FFFFFF'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

ScrollableTabView选中颜色

标签内加上tabBarActiveTextColor并赋值即可

render() {
    return (
        <ScrollableTabView
            tabBarActiveTextColor='#FFFFFF'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}

ScrollableTabView未选中颜色

标签内加上tabBarInactiveTextColor并赋值即可

render() {
    return (
        <ScrollableTabView
            tabBarInactiveTextColor ='#FFFFFF'>
            <Text tabLabel='Tab 1'>Tab 1</Text>
            <Text tabLabel='Tab 2'>Tab 2</Text>
            <Text tabLabel='Tab 3'>Tab 3</Text>
        </ScrollableTabView>
    );
}