{"id":496,"date":"2023-02-25T14:14:54","date_gmt":"2023-02-25T06:14:54","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=496"},"modified":"2023-04-29T20:49:37","modified_gmt":"2023-04-29T12:49:37","slug":"react-native-learning-open-source-carousel-component-react-native-swiper","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-open-source-carousel-component-react-native-swiper\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4b\u5f00\u6e90\u8f6e\u64ad\u7ec4\u4ef6react-native-swiper"},"content":{"rendered":"<p>Github\uff1a<a target=\"_blank\" rel=\"noopener\" href=\"https:\/\/github.com\/leecade\/react-native-swiper\">https:\/\/github.com\/leecade\/react-native-swiper<\/a><\/p>\n<p>\u652f\u6301 Android\/iOS<\/p>\n<p>\u5728\u9879\u76ee\u7684\u6839\u76ee\u5f55\uff08\u5373package.json\u6587\u4ef6\u6240\u5728\u7684\u76ee\u5f55\uff09\u6267\u884c npm \u7684\u547d\u4ee4\uff1a<\/p>\n<p><!-- more --><\/p>\n<ul>\n<li>\u5b89\u88c5\u6a21\u5757\uff1a<code>npm i react-native-swiper --save<\/code><\/li>\n<li>\u67e5\u770b\u6a21\u5757\uff1a<code>npm view react-native-swiper<\/code><\/li>\n<li>\u5220\u9664\u6a21\u5757\uff1a<code>npm rm react-native-swiper --save<\/code><\/li>\n<li>\u67e5\u770b\u5e2e\u52a9\u547d\u4ee4\uff1anpm help \u547d\u4ee4<\/li>\n<\/ul>\n<p>\u6ce8\u610f\uff1a\u8bbe\u7f6e\u8f6e\u64ad\u7ec4\u4ef6 Swiper \u7684\u5305\u88f9\u5bb9\u5668\u9ad8\u5ea6\uff0c\u4f7f\u7528\u5c5e\u6027 height \u8fdb\u884c\u8bbe\u7f6e\uff0c\u4e0d\u80fd\u901a\u8fc7 style \u6837\u5f0f\u8bbe\u7f6e<\/p>\n<p>\u5b9e\u73b0\u6eda\u52a8\u89c6\u56fe\u7684\u539f\u7406\uff1aScrollView\uff0c\u901a\u8fc7\u8ba1\u7b97\u6b65\u957f\u786e\u5b9a\u6ed1\u52a8\u4f4d\u7f6e<\/p>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    Text,\n    Image,\n    View,\n} from &#039;react-native&#039;;\n\nimport Swiper from &#039;react-native-swiper&#039;\n\n\/\/\u83b7\u53d6\u5c4f\u5e55\u5bbd\u9ad8\n\/\/Dimensions.get(&#039;window&#039;).width;\n\/\/Dimensions.get(&#039;window&#039;).height;\n\nclass RNAPP extends Component{\n    constructor(props) {\n        super(props);\n    }\n\n    render() {\n        \/\/showsButtons: \u5de6\u53f3\u4e24\u4fa7\u4e0a\u4e00\u9875\u548c\u4e0b\u4e00\u9875\u63a7\u5236\u6309\u94ae\n        \/\/autoplay: \u81ea\u52a8\u64ad\u653e\uff0c\u9ed8\u8ba4false\n        \/\/autoplayTimeout: \u64ad\u653e\u5468\u671f\uff0c\u9ed8\u8ba42.5s\n        \/*\n        return (\n            &lt;Swiper style={styles.wrapper} showsButtons={true} autoplay={true} autoplayTimeout={5}&gt;\n                &lt;View style={styles.slide1}&gt;\n                    &lt;Text style={styles.text}&gt;Hello Wwiper&lt;\/Text&gt;\n                &lt;\/View&gt;\n                &lt;View style={styles.slide2}&gt;\n                    &lt;Text style={styles.text}&gt;Beautiful&lt;\/Text&gt;\n                &lt;\/View&gt;\n                &lt;View style={styles.slide3}&gt;\n                    &lt;Text style={styles.text}&gt;And simple&lt;\/Text&gt;\n                &lt;\/View&gt;\n            &lt;\/Swiper&gt;\n        );\n        *\/\n        \/\/\u5e26\u56fe\u7247\u8f6e\u64ad\n        return (\n            &lt;Swiper style={styles.wrapper} showsButtons={false} height={400}&gt;\n                &lt;View style={styles.slide1}&gt;\n                    &lt;Image\n                        style={{width:200,height:300}}\n                        resizeMode=&#039;stretch&#039;\n                        source={{uri:&#039;https:\/\/www.baidu.com\/img\/bd_logo1.png&#039;}}\n                        \/&gt;\n                &lt;\/View&gt;\n                &lt;View style={styles.slide2}&gt;\n                    &lt;Text style={styles.text}&gt;Beautiful&lt;\/Text&gt;\n                &lt;\/View&gt;\n                &lt;View style={styles.slide3}&gt;\n                    &lt;Text style={styles.text}&gt;And simple&lt;\/Text&gt;\n                &lt;\/View&gt;\n            &lt;\/Swiper&gt;\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    wrapper: {\n    },\n    slide1: {\n        flex: 1,\n        justifyContent: &#039;center&#039;,\n        alignItems: &#039;center&#039;,\n        backgroundColor: &#039;#9DD6EB&#039;,\n    },\n    slide2: {\n        flex: 1,\n        justifyContent: &#039;center&#039;,\n        alignItems: &#039;center&#039;,\n        backgroundColor: &#039;#97CAE5&#039;,\n    },\n    slide3: {\n        flex: 1,\n        justifyContent: &#039;center&#039;,\n        alignItems: &#039;center&#039;,\n        backgroundColor: &#039;#92BBD9&#039;,\n    },\n    text: {\n        color: &#039;#fff&#039;,\n        fontSize: 30,\n        fontWeight: &#039;bold&#039;,\n    }\n});\n\nAppRegistry.registerComponent(&#039;RNAPP&#039;, () =&gt; RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Github\uff1ahttps:\/\/github.com\/leecade\/react-native-swiper \u652f [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[163],"tags":[],"class_list":["post-496","post","type-post","status-publish","format-standard","hentry","category-react-native"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=496"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/496\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}