react-native封装插件swiper的使用方法

首先创建简单的react-native项目,创建一个文件夹。然后用命令符输入

创建完成之后开发项目，我用的vs

打开控制台，安装swiper依赖。

安装：npm i react-native-swiper --save 查看：npm view react-native-swiper 删除：npm rm react-native-swiper --save 这里还需要 npm i 下更新下本地的依赖库

启动app项目

ios: react-native run-ios android: react-native run-android

开始上码，在src里面创建个components文件夹下边创建个swiper.js文件，以及index.js,加上说明文档

Feedback,View } from 'react-native'; import RNSwiper from 'react-native-swiper';

const styles = StyleSheet.create({
activeDotWrapperStyle: {
//圆点样式
},activeDotStyle: {
//圆点样式
},dotStyle: {
//圆点样式
}
});

const activeDot = (

); const dot = ;

export class Carousel extends Component {
// Define component prop list
static propTypes = {
data: PropTypes.array,height: PropTypes.number,onPressItem: PropTypes.func,renderItem: PropTypes.func.isrequired,autoplay: PropTypes.bool,autoplayTimeout: PropTypes.number
};

// Define props default value
static defaultProps = {
data: [],height: 150,autoplay: true,autoplayTimeout: 2.5,onPressItem: () => {},renderItem: () => {}
};

// Define inner state
state = {
showSwiper: false
};

constructor(props) {
super(props);
this.handleItemPress = this.handleItemPress.bind(this);
}

componentDidMount() {
setTimeout(() => {
this.setState({ showSwiper: true });
});
}

handleItemPress(item) {
this.props.onPressItem(item);
}

_renderSwiperItem(item,index) {
return (
<TouchableWithoutFeedback key={index} onPress={() => this.handleItemPress(item)}>
<View style={[{ flex: 1 }]}>{this.props.renderItem(item)}

); }

render() {
return this.props.data.length === 0 || !this.state.showSwiper ? null : (
<RNSwiper
height={this.props.height} //图片高度
activeDot={activeDot}
dot={dot}
style={{ backgroundColor: '#fff' }}
autoplay={this.props.autoplay} //是否自动轮播
autoplayTimeout={this.props.autoplayTimeout} //轮播秒数

{this.props.data.map((item,idx) => this._renderSwiperItem(item,idx))} //如果数据是个对象里面的数组加一个循环
); } }

这是index.js文件

export { Carousel };

公共组件库

这里用于放置与业务无关的公共组件。组件实现必须考虑灵活性，扩展性，不能包含具体的业务逻辑。

组件必须以你做的业务命名为前缀，如 TryCarousel.js 。每个组件必须单独放在目录中，目录必须全小写（中横线分割），如 carousel/TryCarousel.js 。

一个基本的组件结构：

export class TryCarousel extends Component {
// Define component prop list
static propTypes = {};

// Define props default value
static defaultProps = {};

// Define inner state
state = {};

constructor(props) {
super(props);
}

// LifeCycle Hooks

// Prototype Functions

// Ensure the latest function is render
render() {}
}

组件列表

carousel（轮播组件）

主要用于通用的图片轮播，能够提供点击事件响应。

Usage:

Props:

属性描述类型默认值方法，请参考FlatList自动切换自动切换的时间间隔（单位s）

需要导入的地方

{ return ; }} //图片 />

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

react-native封装插件swiper的使用方法

公共组件库

组件列表

carousel（轮播组件）

猜你在找的JavaScript相关文章