{"id":491,"date":"2023-02-25T14:09:30","date_gmt":"2023-02-25T06:09:30","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=491"},"modified":"2023-04-29T20:50:32","modified_gmt":"2023-04-29T12:50:32","slug":"react-native-learning-progressbar-component","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/02\/25\/react-native-learning-progressbar-component\/","title":{"rendered":"React Native\u5b66\u4e60\u4e4bProgressBar\u7ec4\u4ef6"},"content":{"rendered":"<p>\u5206\u5e73\u53f0\u7684\uff1a<code>ProgressBarAndroid<\/code>\u3001<code>ProgressViewIOS<\/code><\/p>\n<p>ProgressBar\u7ec4\u4ef6\u7684\u5c5e\u6027\uff1a<\/p>\n<ul>\n<li><code>styleAttr<\/code>\uff1a\u8fdb\u5ea6\u6761\u7684\u6837\u5f0f\uff0cHorizontal Small Large Inverse SmallInverse LargeInverse<\/li>\n<li><code>progress<\/code>\uff1a\u5f53\u524d\u7684\u8fdb\u5ea6\u503c\uff08\u57280\u52301\u4e4b\u95f4\uff09<\/li>\n<\/ul>\n<p><!-- more --><\/p>\n<pre><code class=\"language-javascript\">\/**\n * Sample React Native App\n * https:\/\/github.com\/facebook\/react-native\n *\/\n&#039;use strict&#039;;\n\nimport React, { Component } from &#039;react&#039;;\nimport {\n    AppRegistry,\n    StyleSheet,\n    PixelRatio,\n    Text,\n    Image,\n    TouchableOpacity,\n    ProgressBarAndroid,\n    View\n} from &#039;react-native&#039;;\n\nclass RNAPP extends Component {\n    constructor(props) {\n        super(props);\n    }\n\n    render() {\n        return (\n            &lt;View style={[styles.flex, {marginTop:45}]}&gt;\n                &lt;Text&gt;ProgressBar\u7ec4\u4ef6&lt;\/Text&gt;\n\n                &lt;ProgressBarAndroid styleAttr=&quot;Horizontal&quot; \/&gt;\n            &lt;\/View&gt;\n        );\n    }\n}\n\nconst styles = StyleSheet.create({\n    flex:{\n        flex:1,\n    },\n});\n\nAppRegistry.registerComponent(&#039;RNAPP&#039;, () =&gt; RNAPP);<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5206\u5e73\u53f0\u7684\uff1aProgressBarAndroid\u3001ProgressViewIOS ProgressBar\u7ec4\u4ef6\u7684\u5c5e [&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-491","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\/491","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=491"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/491\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=491"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=491"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=491"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}