mirror of
https://github.com/jaywcjlove/reference.git
synced 2025-06-17 12:41:20 +08:00
1918 lines
344 KiB
HTML
1918 lines
344 KiB
HTML
<!doctype html>
|
||
<html lang="en" data-color-mode="dark">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>React Native 备忘清单
|
||
& react-native cheatsheet & Quick Reference</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta description="适合初学者的综合 React Native 备忘清单，在开始 React Native 之前需要先掌握 react 库
|
||
|
||
|
||
入门，为开发人员分享快速参考备忘单。">
|
||
<meta keywords="react-native,reference,Quick,Reference,cheatsheet,cheat,sheet">
|
||
<link rel="icon" href="data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%221em%22%20width%3D%221em%22%3E%20%3Cpath%20d%3D%22m21.66%2010.44-.98%204.18c-.84%203.61-2.5%205.07-5.62%204.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2%201.17-2.42%203.16-3.07%206.5-2.28l1.67.39c4.19.98%205.47%203.05%204.49%207.23Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%20%3Cpath%20d%3D%22M15.06%2019.39c-.62.42-1.4.77-2.35%201.08l-1.58.52c-3.97%201.28-6.06.21-7.35-3.76L2.5%2013.28c-1.28-3.97-.22-6.07%203.75-7.35l1.58-.52c.41-.13.8-.24%201.17-.31-.3.61-.54%201.35-.74%202.2l-.98%204.19c-.98%204.18.31%206.24%204.48%207.23l1.68.4c.58.14%201.12.23%201.62.27Zm2.43-8.88c-.06%200-.12-.01-.19-.02l-4.85-1.23a.75.75%200%200%201%20.37-1.45l4.85%201.23a.748.748%200%200%201-.18%201.47Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3Cpath%20d%3D%22M14.56%2013.89c-.06%200-.12-.01-.19-.02l-2.91-.74a.75.75%200%200%201%20.37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z%22%20fill%3D%22%23228e6c%22%20%2F%3E%20%3C%2Fsvg%3E" type="image/svg+xml">
|
||
<link rel="stylesheet" href="../style/style.css">
|
||
<link rel="stylesheet" href="../style/katex.css">
|
||
</head>
|
||
<body><nav class="header-nav"><div class="max-container"><a href="../index.html" class="logo"><svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="1em" width="1em">
|
||
<path d="m21.66 10.44-.98 4.18c-.84 3.61-2.5 5.07-5.62 4.77-.5-.04-1.04-.13-1.62-.27l-1.68-.4c-4.17-.99-5.46-3.05-4.48-7.23l.98-4.19c.2-.85.44-1.59.74-2.2 1.17-2.42 3.16-3.07 6.5-2.28l1.67.39c4.19.98 5.47 3.05 4.49 7.23Z" fill="#c9d1d9"></path>
|
||
<path d="M15.06 19.39c-.62.42-1.4.77-2.35 1.08l-1.58.52c-3.97 1.28-6.06.21-7.35-3.76L2.5 13.28c-1.28-3.97-.22-6.07 3.75-7.35l1.58-.52c.41-.13.8-.24 1.17-.31-.3.61-.54 1.35-.74 2.2l-.98 4.19c-.98 4.18.31 6.24 4.48 7.23l1.68.4c.58.14 1.12.23 1.62.27Zm2.43-8.88c-.06 0-.12-.01-.19-.02l-4.85-1.23a.75.75 0 0 1 .37-1.45l4.85 1.23a.748.748 0 0 1-.18 1.47Z" fill="#228e6c"></path>
|
||
<path d="M14.56 13.89c-.06 0-.12-.01-.19-.02l-2.91-.74a.75.75 0 0 1 .37-1.45l2.91.74c.4.1.64.51.54.91-.08.34-.38.56-.72.56Z" fill="#228e6c"></path>
|
||
</svg>
|
||
<span class="title">Quick Reference</span></a><div class="menu"><a href="javascript:void(0);" class="searchbtn" id="searchbtn"><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><span>搜索</span><span>⌘K</span></a><a href="https://github.com/jaywcjlove/reference/blob/main/docs/react-native.md" class="" target="__blank"><svg viewBox="0 0 36 36" fill="currentColor" height="1em" width="1em"><path d="m33 6.4-3.7-3.7a1.71 1.71 0 0 0-2.36 0L23.65 6H6a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h22a2 2 0 0 0 2-2V11.76l3-3a1.67 1.67 0 0 0 0-2.36ZM18.83 20.13l-4.19.93 1-4.15 9.55-9.57 3.23 3.23ZM29.5 9.43 26.27 6.2l1.85-1.85 3.23 3.23Z"></path><path fill="none" d="M0 0h36v36H0z"></path></svg><span>编辑</span></a><button id="darkMode" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="light" height="1em" width="1em">
|
||
<path d="M6.995 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007-2.246-5.007-5.007-5.007S6.995 9.239 6.995 12zM11 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2H2zm17 0h3v2h-3zM5.637 19.778l-1.414-1.414 2.121-2.121 1.414 1.414zM16.242 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.344 7.759 4.223 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="dark" height="1em" width="1em">
|
||
<path d="M12 11.807A9.002 9.002 0 0 1 10.049 2a9.942 9.942 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.946 9.946 0 0 0 2.735-5.119A9.003 9.003 0 0 1 12 11.807z"></path>
|
||
</svg>
|
||
</button><script src="../js/dark.js?v=1.5.4"></script><a href="https://github.com/jaywcjlove/reference" class="" target="__blank"><svg viewBox="0 0 16 16" fill="currentColor" height="1em" width="1em"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a></div></div></nav><div class="wrap h1body-exist max-container"><header class="wrap-header h1wrap"><h1 id="react-native-备忘清单"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" height="1em" width="1em">
|
||
<circle cx="12" cy="11.245" r="1.785"></circle>
|
||
<path d="m7.002 14.794-.395-.101c-2.934-.741-4.617-2.001-4.617-3.452 0-1.452 1.684-2.711 4.617-3.452l.395-.1.111.391a19.507 19.507 0 0 0 1.136 2.983l.085.178-.085.178c-.46.963-.841 1.961-1.136 2.985l-.111.39zm-.577-6.095c-2.229.628-3.598 1.586-3.598 2.542 0 .954 1.368 1.913 3.598 2.54.273-.868.603-1.717.985-2.54a20.356 20.356 0 0 1-.985-2.542zm10.572 6.095-.11-.392a19.628 19.628 0 0 0-1.137-2.984l-.085-.177.085-.179c.46-.961.839-1.96 1.137-2.984l.11-.39.395.1c2.935.741 4.617 2 4.617 3.453 0 1.452-1.683 2.711-4.617 3.452l-.395.101zm-.41-3.553c.4.866.733 1.718.987 2.54 2.23-.627 3.599-1.586 3.599-2.54 0-.956-1.368-1.913-3.599-2.542a20.683 20.683 0 0 1-.987 2.542z"></path>
|
||
<path d="m6.419 8.695-.11-.39c-.826-2.908-.576-4.991.687-5.717 1.235-.715 3.222.13 5.303 2.265l.284.292-.284.291a19.718 19.718 0 0 0-2.02 2.474l-.113.162-.196.016a19.646 19.646 0 0 0-3.157.509l-.394.098zm1.582-5.529c-.224 0-.422.049-.589.145-.828.477-.974 2.138-.404 4.38.891-.197 1.79-.338 2.696-.417a21.058 21.058 0 0 1 1.713-2.123c-1.303-1.267-2.533-1.985-3.416-1.985zm7.997 16.984c-1.188 0-2.714-.896-4.298-2.522l-.283-.291.283-.29a19.827 19.827 0 0 0 2.021-2.477l.112-.16.194-.019a19.473 19.473 0 0 0 3.158-.507l.395-.1.111.391c.822 2.906.573 4.992-.688 5.718a1.978 1.978 0 0 1-1.005.257zm-3.415-2.82c1.302 1.267 2.533 1.986 3.415 1.986.225 0 .423-.05.589-.145.829-.478.976-2.142.404-4.384-.89.198-1.79.34-2.698.419a20.526 20.526 0 0 1-1.71 2.124z"></path>
|
||
<path d="m17.58 8.695-.395-.099a19.477 19.477 0 0 0-3.158-.509l-.194-.017-.112-.162A19.551 19.551 0 0 0 11.7 5.434l-.283-.291.283-.29c2.08-2.134 4.066-2.979 5.303-2.265 1.262.727 1.513 2.81.688 5.717l-.111.39zm-3.287-1.421c.954.085 1.858.228 2.698.417.571-2.242.425-3.903-.404-4.381-.824-.477-2.375.253-4.004 1.841.616.67 1.188 1.378 1.71 2.123zM8.001 20.15a1.983 1.983 0 0 1-1.005-.257c-1.263-.726-1.513-2.811-.688-5.718l.108-.391.395.1c.964.243 2.026.414 3.158.507l.194.019.113.16c.604.878 1.28 1.707 2.02 2.477l.284.29-.284.291c-1.583 1.627-3.109 2.522-4.295 2.522zm-.993-5.362c-.57 2.242-.424 3.906.404 4.384.825.47 2.371-.255 4.005-1.842a21.17 21.17 0 0 1-1.713-2.123 20.692 20.692 0 0 1-2.696-.419z"></path>
|
||
<path d="M12 15.313c-.687 0-1.392-.029-2.1-.088l-.196-.017-.113-.162a25.697 25.697 0 0 1-1.126-1.769 26.028 26.028 0 0 1-.971-1.859l-.084-.177.084-.179c.299-.632.622-1.252.971-1.858.347-.596.726-1.192 1.126-1.77l.113-.16.196-.018a25.148 25.148 0 0 1 4.198 0l.194.019.113.16a25.136 25.136 0 0 1 2.1 3.628l.083.179-.083.177a24.742 24.742 0 0 1-2.1 3.628l-.113.162-.194.017c-.706.057-1.412.087-2.098.087zm-1.834-.904c1.235.093 2.433.093 3.667 0a24.469 24.469 0 0 0 1.832-3.168 23.916 23.916 0 0 0-1.832-3.168 23.877 23.877 0 0 0-3.667 0 23.743 23.743 0 0 0-1.832 3.168 24.82 24.82 0 0 0 1.832 3.168z"></path>
|
||
</svg>
|
||
<a aria-hidden="true" tabindex="-1" href="#react-native-备忘清单"><span class="icon icon-link"></span></a>React Native 备忘清单</h1><div class="wrap-body">
|
||
<p><a href="https://npmjs.org/package/react-native"><img src="https://img.shields.io/npm/v/react-native.svg?style=flat" alt="NPM version"></a>
|
||
<a href="https://www.npmjs.com/package/react-native"><img src="https://img.shields.io/npm/dm/react-native.svg?style=flat" alt="Downloads"></a>
|
||
<a href="https://github.com/facebook/react-native/network/dependents"><img src="https://badgen.net/github/dependents-repo/facebook/react-native" alt="Repo Dependents"></a>
|
||
<a href="https://github.com/facebook/react-native"><img src="https://badgen.net/badge/icon/Github?icon=github&label" alt="Github repo"></a></p>
|
||
<p style="padding-top: 12px;">适合初学者的综合 <a href="https://reactnative.dev/">React Native</a> 备忘清单，在开始 <a href="https://reactnative.dev/">React Native</a> 之前需要先掌握 <a href="./react.html">react</a> 库</p>
|
||
<!--rehype:style=padding-top: 12px;-->
|
||
</div></header><div class="menu-tocs"><div class="menu-btn"><svg aria-hidden="true" fill="currentColor" height="1em" width="1em" viewBox="0 0 16 16" version="1.1" data-view-component="true">
|
||
<path fill-rule="evenodd" d="M2 4a1 1 0 100-2 1 1 0 000 2zm3.75-1.5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zm0 5a.75.75 0 000 1.5h8.5a.75.75 0 000-1.5h-8.5zM3 8a1 1 0 11-2 0 1 1 0 012 0zm-1 6a1 1 0 100-2 1 1 0 000 2z"></path>
|
||
</svg></div><div class="menu-modal"><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#入门">入门</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#macos-安装-ios-环境">macOS 安装 iOS 环境</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#macos-安装-android-环境">macOS 安装 Android 环境</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#打开-react-native-debug-菜单">打开 React Native Debug 菜单</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#基本组件">基本组件</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#view">View</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text">Text</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#textinput">TextInput</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#image">Image</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#scrollview">ScrollView</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stylesheet">StyleSheet</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#用户界面">用户界面</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#button">Button</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#switch">Switch</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#列表视图">列表视图</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#sectionlist">SectionList</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flatlist">FlatList</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#android-组件和-api">Android 组件和 API</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#backhandler">BackHandler</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#drawerlayoutandroid">DrawerLayoutAndroid</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#permissionsandroid">PermissionsAndroid</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#toastandroid">ToastAndroid</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#ios-组件和-api">iOS 组件和 API</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#actionsheetios">ActionSheetIOS</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#其它">其它</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#activityindicator">ActivityIndicator</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#alert">Alert</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#animated">Animated</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#dimensions">Dimensions</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#keyboardavoidingview">KeyboardAvoidingView</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#linking">Linking</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#modal">Modal</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#pixelratio">PixelRatio</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#refreshcontrol">RefreshControl</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#statusbar">StatusBar</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#stylesheet-1">StyleSheet</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#stylesheet-2">StyleSheet</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#style-属性">style 属性</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#使用样式表定义">使用样式表定义</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#动态样式">动态样式</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#react-native-中的-flex">React Native 中的 Flex</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#flexdirection">flexDirection</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#justifycontent">justifyContent</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#react-native-中的尺寸">React Native 中的尺寸</a><a aria-hidden="true" class="leve2 tocs-link" data-num="2" href="#props">Props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#view-style-props">View Style Props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#text-style-props">Text Style Props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#shadow-props">Shadow Props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#layout-props">Layout Props</a><a aria-hidden="true" class="leve3 tocs-link" data-num="3" href="#image-style-props">Image Style Props</a></div></div><div class="h1wrap-body"><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="入门"><a aria-hidden="true" tabindex="-1" href="#入门"><span class="icon icon-link"></span></a>入门</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="macos-安装-ios-环境"><a aria-hidden="true" tabindex="-1" href="#macos-安装-ios-环境"><span class="icon icon-link"></span></a>macOS 安装 iOS 环境</h3><div class="wrap-body">
|
||
<p>您将需要 Node、Watchman、React Native 命令行界面、Ruby 版本管理器、Xcode 和 <a href="./cocoapods.html">CocoaPods</a></p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ brew <span class="token function">install</span> <span class="token function">node</span> <span class="token comment"># Node 14 或更新版本</span>
|
||
</span><span class="code-line">$ brew <span class="token function">install</span> watchman
|
||
</span></code></pre>
|
||
<p>使用 <code>.ruby-version</code> 文件来确保您的 Ruby 版本与所需的一致</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ ruby <span class="token parameter variable">--version</span>
|
||
</span><span class="code-line"><span class="token comment"># ruby 2.7.5</span>
|
||
</span></code></pre>
|
||
<p><red>注意:</red> macOS 12.5.1 附带了 Ruby <pur><strong>2.6.8</strong></pur>，这不是 React Native 所要求的，React Native 70+ 需要 Ruby <yel><strong>2.7.5</strong></yel>，可以使用下面工具切换版本：</p>
|
||
<ul class="cols-2">
|
||
<li><a href="https://github.com/rbenv/rbenv">rbenv</a> <em>推荐</em></li>
|
||
<li><a href="https://rvm.io/">RVM</a> <em>推荐</em></li>
|
||
<li><a href="https://github.com/postmodern/chruby">chruby</a></li>
|
||
<li>带有 <a href="https://github.com/asdf-vm/asdf-ruby">asdf-ruby</a> 插件的 <a href="https://github.com/asdf-vm">asdf-vm</a></li>
|
||
</ul>
|
||
<!--rehype:className=cols-2-->
|
||
<p>创建一个新的应用程序</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ npx react-native init MyApp
|
||
</span><span class="code-line"><span class="token comment"># 指定 React Native 版本创建</span>
|
||
</span><span class="code-line">$ npx react-native init MyApp <span class="token punctuation">\</span>
|
||
</span><span class="code-line"> <span class="token parameter variable">--version</span> X.XX.X
|
||
</span><span class="code-line"><span class="token comment"># 创建 typescript 版本项目</span>
|
||
</span><span class="code-line">$ npx react-native init MyTSApp <span class="token punctuation">\</span>
|
||
</span><span class="code-line"><span class="token parameter variable">--template</span> react-native-template-typescript
|
||
</span></code></pre>
|
||
<p>安装依赖</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">yarn</span> <span class="token function">install</span> <span class="token comment"># 根目录运行</span>
|
||
</span><span class="code-line">$ <span class="token builtin class-name">cd</span> ios <span class="token comment"># 进入 ios 目录</span>
|
||
</span><span class="code-line">$ bundle <span class="token function">install</span> <span class="token comment"># 安装 Bundler</span>
|
||
</span><span class="code-line">$ bundle <span class="token builtin class-name">exec</span> pod <span class="token function">install</span> <span class="token comment"># 以安装 iOS 依赖项</span>
|
||
</span></code></pre>
|
||
<p>运行你的 React Native 应用程序</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 启动监听打包 JS 服务，默认端口 8081</span>
|
||
</span><span class="code-line">$ npx react-native start
|
||
</span><span class="code-line"><span class="token comment"># 指定 8088 端口</span>
|
||
</span><span class="code-line">$ npx react-native start <span class="token parameter variable">--port</span><span class="token operator">=</span><span class="token number">8088</span>
|
||
</span><span class="code-line"><span class="token comment"># 启动 iOS 模拟器运行你的应用</span>
|
||
</span><span class="code-line">$ npx react-native run-ios
|
||
</span></code></pre>
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="shortcuts"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>⇧</code> + <code>⌘</code> + <code>2</code></td><td>设备窗格</td></tr><tr><td align="left"><code>⌘</code> + <code>R</code></td><td>构建并运行</td></tr><tr><td align="left"><code>摇动您的设备</code></td><td>打开<yel>开发者</yel>菜单</td></tr></tbody></table>
|
||
<!--rehype:className=shortcuts-->
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2 row-span-2"><div class="wrap-header h3wrap"><h3 id="macos-安装-android-环境"><a aria-hidden="true" tabindex="-1" href="#macos-安装-android-环境"><span class="icon icon-link"></span></a>macOS 安装 Android 环境</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2 row-span-2-->
|
||
<p>您将需要 Node、Watchman、React Native 命令行界面、JDK 和 Android Studio</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ brew <span class="token function">install</span> <span class="token function">node</span> <span class="token comment"># Node 14 或更新版本</span>
|
||
</span><span class="code-line">$ brew <span class="token function">install</span> watchman
|
||
</span></code></pre>
|
||
<p>我们建议使用 <a href="./homebrew.html">Homebrew</a> 安装名为 Azul Zulu 的 OpenJDK 发行版，发行版为 <strong>Intel</strong> 和 <strong>M1 Mac</strong> 提供 JDK</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ brew tap homebrew/cask-versions
|
||
</span><span class="code-line">$ brew <span class="token function">install</span> <span class="token parameter variable">--cask</span> zulu11
|
||
</span></code></pre>
|
||
<p>下载安装 <a href="https://developer.android.com/studio/index.html">Android Studio</a></p>
|
||
<ul class="cols-3">
|
||
<li>Android SDK</li>
|
||
<li>Android SDK Platform</li>
|
||
<li>Android Virtual Device</li>
|
||
</ul>
|
||
<!--rehype:className=cols-3-->
|
||
<p>安装安卓SDK，React Native 应用需要 Android 12 (S) SDK，通过 Android Studio 中的 SDK 管理器安装其他 Android SDK</p>
|
||
<blockquote>
|
||
<p>SDK 管理器也可以在 Android Studio “<strong>Preferences</strong>” 对话框中找到，位于 <strong>Appearance & Behavior</strong> → <strong>System Settings</strong> → <strong>Android SDK</strong></p>
|
||
</blockquote>
|
||
<ul>
|
||
<li><code>Android SDK Platform 31</code></li>
|
||
<li><code>Intel x86 Atom_64 System Image</code> 或 <code>Google APIs Intel x86 Atom System Image</code> 或 (for Apple M1 Silicon) <code>Google APIs ARM 64 v8a System Image</code></li>
|
||
</ul>
|
||
<p>接下来，选择 <code>SDK Tools</code> 选项卡并选中 <code>Show Package Details</code> 旁边的复选框。 查找并展开 <code>Android SDK Build-Tools</code> 条目，然后确保选择了 <pur><strong>31.0.0</strong></pur>。最后点击 <code>Apply</code> 下载并安装 <code>Android SDK</code> 及相关构建工具</p>
|
||
<p>配置 ANDROID_SDK_ROOT 环境变量</p>
|
||
<p>将以下行添加到您的 <code>$HOME/.bash_profile</code> 或 <code>$HOME/.bashrc</code>（如果您使用的是 zsh，则为 <code>~/.zprofile</code> 或 <code>~/.zshrc</code>）配置文件：</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token builtin class-name">export</span> <span class="token assign-left variable">ANDROID_SDK_ROOT</span><span class="token operator">=</span><span class="token environment constant">$HOME</span>/Library/Android/sdk
|
||
</span><span class="code-line"><span class="token builtin class-name">export</span> <span class="token assign-left variable"><span class="token environment constant">PATH</span></span><span class="token operator">=</span><span class="token environment constant">$PATH</span><span class="token builtin class-name">:</span><span class="token variable">$ANDROID_SDK_ROOT</span>/emulator
|
||
</span><span class="code-line"><span class="token builtin class-name">export</span> <span class="token assign-left variable"><span class="token environment constant">PATH</span></span><span class="token operator">=</span><span class="token environment constant">$PATH</span><span class="token builtin class-name">:</span><span class="token variable">$ANDROID_SDK_ROOT</span>/platform-tools
|
||
</span></code></pre>
|
||
<p>创建一个新的应用程序</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ npx react-native init MyApp
|
||
</span><span class="code-line"><span class="token comment"># 指定 React Native 版本创建</span>
|
||
</span><span class="code-line">$ npx react-native init MyApp <span class="token parameter variable">--version</span> X.XX.X
|
||
</span><span class="code-line"><span class="token comment"># 创建 typescript 版本项目</span>
|
||
</span><span class="code-line">$ npx react-native init MyTSApp <span class="token parameter variable">--template</span> react-native-template-typescript
|
||
</span></code></pre>
|
||
<p>安装依赖</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line">$ <span class="token function">yarn</span> <span class="token function">install</span> <span class="token comment"># 根目录运行</span>
|
||
</span></code></pre>
|
||
<p>使用虚拟设备</p>
|
||
<ul>
|
||
<li>使用 Android Studio 打开 <pur>./AwesomeProject/android</pur></li>
|
||
<li>从 Android Studio 中打开 <strong>AVD 管理器</strong> 来查看可用的 Android <strong>虚拟设备 (AVD)</strong> 列表</li>
|
||
<li>第一次，您可能需要创建一个新的 AVD。选择 <strong>Create Virtual Device...</strong>，然后从列表中选择任何电话并单击“下一步”，然后选择 <strong>S API Level 31 image</strong>。</li>
|
||
</ul>
|
||
<p>运行你的 React Native 应用程序</p>
|
||
<pre class="language-bash"><code class="language-bash code-highlight"><span class="code-line"><span class="token comment"># 启动监听打包 JS 服务</span>
|
||
</span><span class="code-line">$ npx react-native start
|
||
</span><span class="code-line"><span class="token comment"># 启动 iOS 模拟器运行你的应用</span>
|
||
</span><span class="code-line">$ npx react-native run-ios
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="打开-react-native-debug-菜单"><a aria-hidden="true" tabindex="-1" href="#打开-react-native-debug-菜单"><span class="icon icon-link"></span></a>打开 React Native Debug 菜单</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table class="shortcuts"><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>⌘</code> + <code>M</code>(Android)</td><td>打开<yel>开发者</yel>菜单</td></tr><tr><td align="left"><code>⌘</code> + <code>D</code>(iOS)</td><td>打开<yel>开发者</yel>菜单</td></tr><tr><td align="left"><code>Ctrl</code> + <code>D</code>(Linux)</td><td>打开<yel>开发者</yel>菜单</td></tr><tr><td align="left"><pur>摇动您的设备</pur></td><td>打开<yel>开发者</yel>菜单</td></tr><tr><td align="left">按两次 <code>R</code> 键</td><td>构建并运行</td></tr></tbody></table>
|
||
<!--rehype:className=shortcuts-->
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="基本组件"><a aria-hidden="true" tabindex="-1" href="#基本组件"><span class="icon icon-link"></span></a>基本组件</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="view"><a aria-hidden="true" tabindex="-1" href="#view"><span class="icon icon-link"></span></a>View</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ViewExample</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">0.5</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>构建 UI 的最基本组件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="text"><a aria-hidden="true" tabindex="-1" href="#text"><span class="icon icon-link"></span></a>Text</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Text</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">StyleSheet</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">BoldBeautiful</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">baseText</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 我是粗体
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">innerText</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 和红色
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">baseText</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">'bold'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">innerText</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>用于显示文本的组件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="textinput"><a aria-hidden="true" tabindex="-1" href="#textinput"><span class="icon icon-link"></span></a>TextInput</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">SafeAreaView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">TextInput</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">UseTextInput</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> text<span class="token punctuation">,</span> onChangeText
|
||
</span><span class="code-line"> <span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useState</span><span class="token punctuation">(</span><span class="token string">"Useless Text"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TextInput</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onChangeText</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onChangeText<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>text<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<p>用于通过键盘将文本输入应用程序的组件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="image"><a aria-hidden="true" tabindex="-1" href="#image"><span class="icon icon-link"></span></a>Image</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Image</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">paddingTop</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">tinyLogo</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">logo</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">66</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">58</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">DisplayAnImage</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">tinyLogo</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'@expo/snack-static/react-native-logo.png'</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">tinyLogo</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">uri</span><span class="token operator">:</span> <span class="token string">'https://reactnative.dev/img/tiny_logo.png'</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">logo</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">uri</span><span class="token operator">:</span> <span class="token string">'data:image/png;base64,iVBORw0K.....'</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">DisplayAnImage</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>用于显示图像的组件</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="scrollview"><a aria-hidden="true" tabindex="-1" href="#scrollview"><span class="icon icon-link"></span></a>ScrollView</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SafeAreaView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ScrollView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StatusBar</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SafeAreaView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ScrollView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">scrollView</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||
</span></span><span class="code-line"><span class="token plain-text"> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||
</span></span><span class="code-line"><span class="token plain-text"> Ut enim ad minim veniam, quis nostrud exercitation
|
||
</span></span><span class="code-line"><span class="token plain-text"> ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||
</span></span><span class="code-line"><span class="token plain-text"> Duis aute irure dolor in reprehenderit in voluptate velit
|
||
</span></span><span class="code-line"><span class="token plain-text"> esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
|
||
</span></span><span class="code-line"><span class="token plain-text"> occaecat cupidatat non proident, sunt in culpa qui officia
|
||
</span></span><span class="code-line"><span class="token plain-text"> deserunt mollit anim id est laborum.
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ScrollView</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">paddingTop</span><span class="token operator">:</span> <span class="token maybe-class-name">StatusBar</span><span class="token punctuation">.</span><span class="token property-access">currentHeight</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">scrollView</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'pink'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginHorizontal</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">42</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>提供一个可以承载多个组件和视图的滚动容器</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="stylesheet"><a aria-hidden="true" tabindex="-1" href="#stylesheet"><span class="icon icon-link"></span></a>StyleSheet</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> React Native
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#eaeaea"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#61dafb"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"#20232a"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<p>提供类似于 CSS 样式表的抽象层</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="用户界面"><a aria-hidden="true" tabindex="-1" href="#用户界面"><span class="icon icon-link"></span></a>用户界面</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="button"><a aria-hidden="true" tabindex="-1" href="#button"><span class="icon icon-link"></span></a>Button</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onPressLearnMore<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Learn More<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#841584<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">accessibilityLabel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>了解紫色按钮的更多信息<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p>一个基本的按钮组件，用于处理应该在任何平台上都能很好地呈现的触摸</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="switch"><a aria-hidden="true" tabindex="-1" href="#switch"><span class="icon icon-link"></span></a>Switch</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Switch</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Switch</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">trackColor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token boolean">false</span><span class="token operator">:</span> <span class="token string">"#767577"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token operator">:</span> <span class="token string">"#81b0ff"</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">thumbColor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isEnabled <span class="token operator">?</span> <span class="token string">"#f5dd4b"</span> <span class="token operator">:</span> <span class="token string">"#f4f3f4"</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">ios_backgroundColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#3e3e3e<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onValueChange</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>toggleSwitch<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">value</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>isEnabled<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p>呈现布尔输入</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="列表视图"><a aria-hidden="true" tabindex="-1" href="#列表视图"><span class="icon icon-link"></span></a>列表视图</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="sectionlist"><a aria-hidden="true" tabindex="-1" href="#sectionlist"><span class="icon icon-link"></span></a>SectionList</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SafeAreaView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SectionList</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StatusBar</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">DATA</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Main dishes"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Pizza"</span><span class="token punctuation">,</span> <span class="token string">"Burger"</span><span class="token punctuation">,</span> <span class="token string">"Risotto"</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Sides"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"French Fries"</span><span class="token punctuation">,</span> <span class="token string">"Onion Rings"</span><span class="token punctuation">,</span> <span class="token string">"Fried Shrimps"</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Drinks"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Water"</span><span class="token punctuation">,</span> <span class="token string">"Coke"</span><span class="token punctuation">,</span> <span class="token string">"Beer"</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Desserts"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Cheese Cake"</span><span class="token punctuation">,</span> <span class="token string">"Ice Cream"</span><span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Item</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> title <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">item</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SafeAreaView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SectionList</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">sections</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">DATA</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter">item<span class="token punctuation">,</span> index</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> item <span class="token operator">+</span> index<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Item</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">renderSectionHeader</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> <span class="token literal-property property">section</span><span class="token operator">:</span> <span class="token punctuation">{</span> title <span class="token punctuation">}</span> <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">header</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">paddingTop</span><span class="token operator">:</span> <span class="token maybe-class-name">StatusBar</span><span class="token punctuation">.</span><span class="token property-access">currentHeight</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginHorizontal</span><span class="token operator">:</span> <span class="token number">16</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">item</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#f9c2ff"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginVertical</span><span class="token operator">:</span> <span class="token number">8</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#fff"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">24</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flatlist"><a aria-hidden="true" tabindex="-1" href="#flatlist"><span class="icon icon-link"></span></a>FlatList</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">SafeAreaView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">FlatList</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StatusBar</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">DATA</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'bd7acbea-c1b1-46c2-aed5-3ad53abb28ba'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'First Item'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'3ac68afc-c605-48d3-a4f8-fbd91aa97f63'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Second Item'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">id</span><span class="token operator">:</span> <span class="token string">'58694a0f-3da1-471f-bd96-145571e29d72'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">'Third Item'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Item</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> title <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">item</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>title<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">renderItem</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> item <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Item</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>item<span class="token punctuation">.</span><span class="token property-access">title</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SafeAreaView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">FlatList</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">data</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token constant">DATA</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">renderItem</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>renderItem<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">keyExtractor</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token parameter">item</span> <span class="token arrow operator">=></span> item<span class="token punctuation">.</span><span class="token property-access">id</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token maybe-class-name">StatusBar</span><span class="token punctuation">.</span><span class="token property-access">currentHeight</span> <span class="token operator">||</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">item</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#f9c2ff'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginVertical</span><span class="token operator">:</span> <span class="token number">8</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginHorizontal</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">32</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="android-组件和-api"><a aria-hidden="true" tabindex="-1" href="#android-组件和-api"><span class="icon icon-link"></span></a>Android 组件和 API</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="backhandler"><a aria-hidden="true" tabindex="-1" href="#backhandler"><span class="icon icon-link"></span></a>BackHandler</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useEffect <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">BackHandler</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Alert</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">useEffect</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">backAction</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">Alert</span><span class="token punctuation">.</span><span class="token method function property-access">alert</span><span class="token punctuation">(</span><span class="token string">"Hold on!"</span><span class="token punctuation">,</span> <span class="token string">"你确定要回去吗？"</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Cancel"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword null nil">null</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">"cancel"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"YES"</span><span class="token punctuation">,</span> <span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token maybe-class-name">BackHandler</span><span class="token punctuation">.</span><span class="token method function property-access">exitApp</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> backHandler <span class="token operator">=</span> <span class="token maybe-class-name">BackHandler</span><span class="token punctuation">.</span><span class="token method function property-access">addEventListener</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">"hardwareBackPress"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> backAction
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> backHandler<span class="token punctuation">.</span><span class="token method function property-access">remove</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">text</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">点击后退按钮！</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">"bold"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>检测硬件按钮按下以进行后退导航</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="drawerlayoutandroid"><a aria-hidden="true" tabindex="-1" href="#drawerlayoutandroid"><span class="icon icon-link"></span></a>DrawerLayoutAndroid</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useRef<span class="token punctuation">,</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">DrawerLayoutAndroid</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> drawer <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword null nil">null</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>drawerPosition<span class="token punctuation">,</span> setDrawerPosition<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"left"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">changeDrawerPosition</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>drawerPosition <span class="token operator">===</span> <span class="token string">"left"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setDrawerPosition</span><span class="token punctuation">(</span><span class="token string">"right"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setDrawerPosition</span><span class="token punctuation">(</span><span class="token string">"left"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">navigationView</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">,</span> styles<span class="token punctuation">.</span><span class="token property-access">navigationContainer</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">I'm in the Drawer!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Close drawer<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> drawer<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">closeDrawer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">DrawerLayoutAndroid</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">ref</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>drawer<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">drawerWidth</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">300</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">drawerPosition</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>drawerPosition<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">renderNavigationView</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>navigationView<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Drawer on the </span><span class="token punctuation">{</span>drawerPosition<span class="token punctuation">}</span><span class="token plain-text">!
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Change Drawer Position<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">changeDrawerPosition</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> Swipe from the side or press button below to see it!
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Open drawer<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> drawer<span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">.</span><span class="token method function property-access">openDrawer</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">DrawerLayoutAndroid</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">16</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">navigationContainer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#ecf0f1"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">paragraph</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>在 Android 上呈现 DrawerLayout</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="permissionsandroid"><a aria-hidden="true" tabindex="-1" href="#permissionsandroid"><span class="icon icon-link"></span></a>PermissionsAndroid</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">PermissionsAndroid</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">SafeAreaView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StatusBar</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">requestCameraPermission</span> <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">try</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> granted <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token maybe-class-name">PermissionsAndroid</span><span class="token punctuation">.</span><span class="token method function property-access">request</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">PermissionsAndroid</span><span class="token punctuation">.</span><span class="token constant">PERMISSIONS</span><span class="token punctuation">.</span><span class="token constant">CAMERA</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Cool Photo App Camera Permission"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">message</span><span class="token operator">:</span>
|
||
</span><span class="code-line"> <span class="token string">"Cool Photo App needs access to your camera "</span> <span class="token operator">+</span>
|
||
</span><span class="code-line"> <span class="token string">"so you can take awesome pictures."</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">buttonNeutral</span><span class="token operator">:</span> <span class="token string">"Ask Me Later"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">buttonNegative</span><span class="token operator">:</span> <span class="token string">"Cancel"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">buttonPositive</span><span class="token operator">:</span> <span class="token string">"OK"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>granted <span class="token operator">===</span> <span class="token maybe-class-name">PermissionsAndroid</span><span class="token punctuation">.</span><span class="token constant">RESULTS</span><span class="token punctuation">.</span><span class="token constant">GRANTED</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"You can use the camera"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Camera permission denied"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">catch</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">warn</span><span class="token punctuation">(</span>err<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">item</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Try permissions</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>request permissions<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>requestCameraPermission<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">paddingTop</span><span class="token operator">:</span> <span class="token maybe-class-name">StatusBar</span><span class="token punctuation">.</span><span class="token property-access">currentHeight</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#ecf0f1"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">8</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">item</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">"bold"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>提供对 Android M 中引入的权限模型的访问</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="toastandroid"><a aria-hidden="true" tabindex="-1" href="#toastandroid"><span class="icon icon-link"></span></a>ToastAndroid</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StatusBar</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">showToast</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token method function property-access">show</span><span class="token punctuation">(</span><span class="token string">"一只皮卡丘出现在附近!"</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token constant">SHORT</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">showToastWithGravity</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token method function property-access">showWithGravity</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">"All Your Base Are Belong To Us"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token constant">SHORT</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token constant">CENTER</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">showToastWithGravityAndOffset</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token method function property-access">showWithGravityAndOffset</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token string">"A wild toast appeared!"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token constant">LONG</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ToastAndroid</span><span class="token punctuation">.</span><span class="token constant">BOTTOM</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token number">25</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token number">50</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Toast<span class="token punctuation">"</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">showToast</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Toast With Gravity<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">showToastWithGravity</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle Toast With Gravity & Offset<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">showToastWithGravityAndOffset</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">paddingTop</span><span class="token operator">:</span> <span class="token maybe-class-name">StatusBar</span><span class="token punctuation">.</span><span class="token property-access">currentHeight</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#888888"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">8</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>创建 Android Toast 警报</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="ios-组件和-api"><a aria-hidden="true" tabindex="-1" href="#ios-组件和-api"><span class="icon icon-link"></span></a>iOS 组件和 API</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-1-->
|
||
</div></div><div class="h2wrap-body cols-1"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="actionsheetios"><a aria-hidden="true" tabindex="-1" href="#actionsheetios"><span class="icon icon-link"></span></a>ActionSheetIOS</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">ActionSheetIOS</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>result<span class="token punctuation">,</span> setResult<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token string">"🔮"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">onPress</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">ActionSheetIOS</span><span class="token punctuation">.</span><span class="token method function property-access">showActionSheetWithOptions</span><span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"Cancel"</span><span class="token punctuation">,</span> <span class="token string">"Generate number"</span><span class="token punctuation">,</span> <span class="token string">"Reset"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">destructiveButtonIndex</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">cancelButtonIndex</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">userInterfaceStyle</span><span class="token operator">:</span> <span class="token string">'dark'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token parameter">buttonIndex</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>buttonIndex <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// cancel action</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>buttonIndex <span class="token operator">===</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setResult</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">floor</span><span class="token punctuation">(</span><span class="token known-class-name class-name">Math</span><span class="token punctuation">.</span><span class="token method function property-access">random</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">*</span> <span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>buttonIndex <span class="token operator">===</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setResult</span><span class="token punctuation">(</span><span class="token string">"🔮"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">result</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token punctuation">{</span>result<span class="token punctuation">}</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onPress<span class="token punctuation">}</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Show Action Sheet<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">result</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">64</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="其它"><a aria-hidden="true" tabindex="-1" href="#其它"><span class="icon icon-link"></span></a>其它</h2><div class="wrap-body">
|
||
<!--rehype:body-class=cols-2-->
|
||
</div></div><div class="h2wrap-body cols-2"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="activityindicator"><a aria-hidden="true" tabindex="-1" href="#activityindicator"><span class="icon icon-link"></span></a>ActivityIndicator</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">ActivityIndicator</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">,</span> styles<span class="token punctuation">.</span><span class="token property-access">horizontal</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ActivityIndicator</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ActivityIndicator</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ActivityIndicator</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>small<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#0000ff<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ActivityIndicator</span></span> <span class="token attr-name">size</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>large<span class="token punctuation">"</span></span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#00ff00<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">horizontal</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flexDirection</span><span class="token operator">:</span> <span class="token string">"row"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"space-around"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">10</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>显示圆形加载指示器</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="alert"><a aria-hidden="true" tabindex="-1" href="#alert"><span class="icon icon-link"></span></a>Alert</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Alert</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">createTwoButtonAlert</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">Alert</span><span class="token punctuation">.</span><span class="token method function property-access">alert</span><span class="token punctuation">(</span> <span class="token string">"Alert Title"</span><span class="token punctuation">,</span> <span class="token string">"My Alert Msg"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">[</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"Cancel"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"Cancel Pressed"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">style</span><span class="token operator">:</span> <span class="token string">"cancel"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">{</span> <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">"OK"</span><span class="token punctuation">,</span> <span class="token function-variable function">onPress</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span><span class="token string">"OK Pressed"</span><span class="token punctuation">)</span> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">]</span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"2-Button Alert"</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>createTwoButtonAlert<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"space-around"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>启动具有指定标题和消息的警报对话框</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="animated"><a aria-hidden="true" tabindex="-1" href="#animated"><span class="icon icon-link"></span></a>Animated</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useRef <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Animated</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SafeAreaView</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// fadeAnim 将用作不透明度的值。 初始值：0</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> fadeAnim <span class="token operator">=</span> <span class="token function">useRef</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Animated<span class="token punctuation">.</span>Value</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">current</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">fadeIn</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 将在 5 秒内将 fadeAnim 值更改为 1</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">Animated</span><span class="token punctuation">.</span><span class="token method function property-access">timing</span><span class="token punctuation">(</span>fadeAnim<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">toValue</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">5000</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">fadeOut</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 将在 3 秒内将 fadeAnim 值更改为 0</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">Animated</span><span class="token punctuation">.</span><span class="token method function property-access">timing</span><span class="token punctuation">(</span>fadeAnim<span class="token punctuation">,</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">toValue</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">duration</span><span class="token operator">:</span> <span class="token number">3000</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SafeAreaView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Animated.View</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> styles<span class="token punctuation">.</span><span class="token property-access">fadingContainer</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token comment">// 将不透明度绑定到动画值</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">opacity</span><span class="token operator">:</span> fadeAnim
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">fadingText</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Fading View!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Animated.View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">buttonRow</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>淡入淡出<span class="token punctuation">"</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fadeIn<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>淡出视图<span class="token punctuation">"</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>fadeOut<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fadingContainer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"powderblue"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fadingText</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">28</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">buttonRow</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flexBasis</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"space-evenly"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginVertical</span><span class="token operator">:</span> <span class="token number">16</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>一个用于创建易于构建和维护的流畅、强大的动画的库</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="dimensions"><a aria-hidden="true" tabindex="-1" href="#dimensions"><span class="icon icon-link"></span></a>Dimensions</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Dimensions</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> windowWidth <span class="token operator">=</span> <span class="token maybe-class-name">Dimensions</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">'window'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">width</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> windowHeight <span class="token operator">=</span> <span class="token maybe-class-name">Dimensions</span><span class="token punctuation">.</span><span class="token method function property-access">get</span><span class="token punctuation">(</span><span class="token string">'window'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">height</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>提供获取设备尺寸的接口</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="keyboardavoidingview"><a aria-hidden="true" tabindex="-1" href="#keyboardavoidingview"><span class="icon icon-link"></span></a>KeyboardAvoidingView</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">KeyboardAvoidingView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">TextInput</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Platform</span><span class="token punctuation">,</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">TouchableWithoutFeedback</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Keyboard</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">KeyboardAvoidingComponent</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">KeyboardAvoidingView</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">behavior</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">Platform</span><span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">"ios"</span> <span class="token operator">?</span> <span class="token string">"padding"</span> <span class="token operator">:</span> <span class="token string">"height"</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TouchableWithoutFeedback</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token maybe-class-name">Keyboard</span><span class="token punctuation">.</span><span class="token property-access">dismiss</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">inner</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">header</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Header</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">TextInput</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>用户名<span class="token punctuation">"</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">textInput</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">btnContainer</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit<span class="token punctuation">"</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token keyword null nil">null</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">TouchableWithoutFeedback</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">KeyboardAvoidingView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">inner</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"space-around"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">header</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token literal-property property">marginBottom</span><span class="token operator">:</span> <span class="token number">48</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textInput</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">40</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">"#000000"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">borderBottomWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginBottom</span><span class="token operator">:</span> <span class="token number">36</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">btnContainer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"white"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">12</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">KeyboardAvoidingComponent</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>提供一个自动移出虚拟键盘的视图</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="linking"><a aria-hidden="true" tabindex="-1" href="#linking"><span class="icon icon-link"></span></a>Linking</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useCallback <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Alert</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Linking</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> supportedURL <span class="token operator">=</span> <span class="token string">"https://google.com"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> unsupportedURL <span class="token operator">=</span> <span class="token string">"slack://open?team=123456"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">OpenURLButton</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> url<span class="token punctuation">,</span> children <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> handlePress <span class="token operator">=</span> <span class="token function">useCallback</span><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 检查具有自定义 URL 方案的链接是否支持该链接。</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> supported <span class="token operator">=</span> <span class="token keyword control-flow">await</span> <span class="token maybe-class-name">Linking</span><span class="token punctuation">.</span><span class="token method function property-access">canOpenURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>supported<span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token comment">// 打开某些应用程序的链接，如果 URL 方案是“http”，则应打开 Web 链接</span>
|
||
</span><span class="code-line"> <span class="token comment">// 通过手机中的某些浏览器</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">await</span> <span class="token maybe-class-name">Linking</span><span class="token punctuation">.</span><span class="token method function property-access">openURL</span><span class="token punctuation">(</span>url<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token maybe-class-name">Alert</span><span class="token punctuation">.</span><span class="token method function property-access">alert</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">不知道如何打开这个网址： </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>url<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span>url<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>children<span class="token punctuation">}</span></span> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>handlePress<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">OpenURLButton</span></span> <span class="token attr-name">url</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>supportedURL<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 打开支持的 URL
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">OpenURLButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">OpenURLButton</span></span> <span class="token attr-name">url</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>unsupportedURL<span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> 打开不支持的 URL
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">OpenURLButton</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>提供一个通用接口来与传入和传出应用程序链接进行交互</p>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="modal"><a aria-hidden="true" tabindex="-1" href="#modal"><span class="icon icon-link"></span></a>Modal</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">Alert</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Modal</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Pressable</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>modalVisible<span class="token punctuation">,</span> setModalVisible<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">centeredView</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Modal</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">animationType</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>slide<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">transparent</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">visible</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>modalVisible<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onRequestClose</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token maybe-class-name">Alert</span><span class="token punctuation">.</span><span class="token method function property-access">alert</span><span class="token punctuation">(</span><span class="token string">"模态已关闭"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token function">setModalVisible</span><span class="token punctuation">(</span><span class="token operator">!</span>modalVisible<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">centeredView</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">modalView</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">modalText</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hello World!</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pressable</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span><span class="token property-access">button</span><span class="token punctuation">,</span> styles<span class="token punctuation">.</span><span class="token property-access">buttonClose</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setModalVisible</span><span class="token punctuation">(</span><span class="token operator">!</span>modalVisible<span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">textStyle</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Hide Modal</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Pressable</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Modal</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Pressable</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>styles<span class="token punctuation">.</span><span class="token property-access">button</span><span class="token punctuation">,</span> styles<span class="token punctuation">.</span><span class="token property-access">buttonOpen</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setModalVisible</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">textStyle</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">Show Modal</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Pressable</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">centeredView</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginTop</span><span class="token operator">:</span> <span class="token number">22</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">modalView</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">margin</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"white"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">35</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">"center"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">"#000"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">shadowOffset</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">2</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">shadowOpacity</span><span class="token operator">:</span> <span class="token number">0.25</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">shadowRadius</span><span class="token operator">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">elevation</span><span class="token operator">:</span> <span class="token number">5</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">button</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">elevation</span><span class="token operator">:</span> <span class="token number">2</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">buttonOpen</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#F194FF"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">buttonClose</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#2196F3"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"white"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontWeight</span><span class="token operator">:</span> <span class="token string">"bold"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">modalText</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginBottom</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">"center"</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>提供一种在封闭视图上方呈现内容的简单方法</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="pixelratio"><a aria-hidden="true" tabindex="-1" href="#pixelratio"><span class="icon icon-link"></span></a>PixelRatio</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword">var</span> image <span class="token operator">=</span> <span class="token function">getImage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token maybe-class-name">PixelRatio</span><span class="token punctuation">.</span><span class="token method function property-access">getPixelSizeForLayoutSize</span><span class="token punctuation">(</span><span class="token number">200</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token maybe-class-name">PixelRatio</span><span class="token punctuation">.</span><span class="token method function property-access">getPixelSizeForLayoutSize</span><span class="token punctuation">(</span><span class="token number">100</span><span class="token punctuation">)</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>image<span class="token punctuation">}</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">100</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>提供对设备像素密度的访问</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="refreshcontrol"><a aria-hidden="true" tabindex="-1" href="#refreshcontrol"><span class="icon icon-link"></span></a>RefreshControl</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span>
|
||
</span></span><span class="code-line"><span class="token imports"> <span class="token maybe-class-name">RefreshControl</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SafeAreaView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">ScrollView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span>
|
||
</span></span><span class="code-line"><span class="token imports"><span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function">wait</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">timeout</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token parameter">resolve</span> <span class="token arrow operator">=></span> <span class="token function">setTimeout</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> timeout<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">App</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>refreshing<span class="token punctuation">,</span> setRefreshing<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> onRefresh <span class="token operator">=</span> <span class="token maybe-class-name">React</span><span class="token punctuation">.</span><span class="token method function property-access">useCallback</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setRefreshing</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token function">wait</span><span class="token punctuation">(</span><span class="token number">2000</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setRefreshing</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SafeAreaView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">ScrollView</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">contentContainerStyle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">scrollView</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">refreshControl</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">RefreshControl</span></span>
|
||
</span></span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"><span class="token tag"> <span class="token attr-name">refreshing</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>refreshing<span class="token punctuation">}</span></span>
|
||
</span></span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"><span class="token tag"> <span class="token attr-name">onRefresh</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onRefresh<span class="token punctuation">}</span></span>
|
||
</span></span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"><span class="token tag"> <span class="token punctuation">/></span></span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">下拉看 RefreshControl 指标</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">ScrollView</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">scrollView</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'pink'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">alignItems</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>该组件在 ScrollView 内部使用，以添加下拉刷新功能</p>
|
||
</div></div></div><div class="wrap h3body-not-exist col-span-2"><div class="wrap-header h3wrap"><h3 id="statusbar"><a aria-hidden="true" tabindex="-1" href="#statusbar"><span class="icon icon-link"></span></a>StatusBar</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=col-span-2-->
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> useState <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Button</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Platform</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SafeAreaView</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StatusBar</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Text</span><span class="token punctuation">,</span> <span class="token maybe-class-name">View</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">STYLES</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'default'</span><span class="token punctuation">,</span> <span class="token string">'dark-content'</span><span class="token punctuation">,</span> <span class="token string">'light-content'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token constant">TRANSITIONS</span> <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">'fade'</span><span class="token punctuation">,</span> <span class="token string">'slide'</span><span class="token punctuation">,</span> <span class="token string">'none'</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">App</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>hidden<span class="token punctuation">,</span> setHidden<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>statusBarStyle<span class="token punctuation">,</span> setStatusBarStyle<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token constant">STYLES</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token punctuation">[</span>statusBarTransition<span class="token punctuation">,</span> setStatusBarTransition<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">useState</span><span class="token punctuation">(</span><span class="token constant">TRANSITIONS</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">changeStatusBarVisibility</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token function">setHidden</span><span class="token punctuation">(</span><span class="token operator">!</span>hidden<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">changeStatusBarStyle</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> styleId <span class="token operator">=</span> <span class="token constant">STYLES</span><span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>statusBarStyle<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>styleId <span class="token operator">===</span> <span class="token constant">STYLES</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setStatusBarStyle</span><span class="token punctuation">(</span><span class="token constant">STYLES</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setStatusBarStyle</span><span class="token punctuation">(</span><span class="token constant">STYLES</span><span class="token punctuation">[</span>styleId<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword">const</span> <span class="token function-variable function">changeStatusBarTransition</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword">const</span> transition <span class="token operator">=</span> <span class="token constant">TRANSITIONS</span><span class="token punctuation">.</span><span class="token method function property-access">indexOf</span><span class="token punctuation">(</span>statusBarTransition<span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">1</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">if</span> <span class="token punctuation">(</span>transition <span class="token operator">===</span> <span class="token constant">TRANSITIONS</span><span class="token punctuation">.</span><span class="token property-access">length</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setStatusBarTransition</span><span class="token punctuation">(</span><span class="token constant">TRANSITIONS</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span> <span class="token keyword control-flow">else</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token function">setStatusBarTransition</span><span class="token punctuation">(</span><span class="token constant">TRANSITIONS</span><span class="token punctuation">[</span>transition<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">SafeAreaView</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">StatusBar</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">animated</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token boolean">true</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">backgroundColor</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#61dafb<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">barStyle</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>statusBarStyle<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">showHideTransition</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>statusBarTransition<span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">hidden</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>hidden<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">textStyle</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> StatusBar Visibility:</span><span class="token punctuation">{</span><span class="token string">'\n'</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>hidden <span class="token operator">?</span> <span class="token string">'Hidden'</span> <span class="token operator">:</span> <span class="token string">'Visible'</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">textStyle</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> StatusBar Style:</span><span class="token punctuation">{</span><span class="token string">'\n'</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>statusBarStyle<span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token maybe-class-name">Platform</span><span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token operator">?</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">textStyle</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> StatusBar Transition:</span><span class="token punctuation">{</span><span class="token string">'\n'</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span>statusBarTransition<span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">buttonsContainer</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Toggle StatusBar<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>changeStatusBarVisibility<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Change StatusBar Style<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>changeStatusBarStyle<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token punctuation">{</span><span class="token maybe-class-name">Platform</span><span class="token punctuation">.</span><span class="token constant">OS</span> <span class="token operator">===</span> <span class="token string">'ios'</span> <span class="token operator">?</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Button</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Change StatusBar Transition<span class="token punctuation">"</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">onPress</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>changeStatusBarTransition<span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span> <span class="token operator">:</span> <span class="token keyword null nil">null</span><span class="token punctuation">}</span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">SafeAreaView</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#ECF0F1'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">buttonsContainer</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">10</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textAlign</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">marginBottom</span><span class="token operator">:</span> <span class="token number">8</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token maybe-class-name">App</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<p>控制应用程序状态栏的组件</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="stylesheet-1"><a aria-hidden="true" tabindex="-1" href="#stylesheet-1"><span class="icon icon-link"></span></a>StyleSheet</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="stylesheet-2"><a aria-hidden="true" tabindex="-1" href="#stylesheet-2"><span class="icon icon-link"></span></a>StyleSheet</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">StyleSheet</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">'react-native'</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">paragraph</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">11</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">textTransform</span><span class="token operator">:</span> <span class="token string">'uppercase'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">段落</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">label</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">标签</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">Text</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>StyleSheet 是一种抽象，它通过使用二维 JavaScript 对象接受 CSS 样式规则来替代 CSS</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="style-属性"><a aria-hidden="true" tabindex="-1" href="#style-属性"><span class="icon icon-link"></span></a>style 属性</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">]</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p>可以使用 <code>style={}</code> 属性设置组件的样式，该属性接受对象作为内联样式、样式表创建的样式定义或一组对象/定义来组成样式</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="使用样式表定义"><a aria-hidden="true" tabindex="-1" href="#使用样式表定义"><span class="icon icon-link"></span></a>使用样式表定义</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 使用内联样式</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">AwesomeBox</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'red'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token comment">// 使用样式表 API</span>
|
||
</span><span class="code-line"><span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">AwesomeBox</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">box</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">box</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'red'</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="动态样式"><a aria-hidden="true" tabindex="-1" href="#动态样式"><span class="icon icon-link"></span></a>动态样式</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token comment">// 如果 props.isActive 为真 则在 `paragraph`</span>
|
||
</span><span class="code-line"><span class="token comment">// 样式之上应用 `selected` 样式</span>
|
||
</span><span class="code-line"><span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">Item</span></span><span class="token punctuation">(</span><span class="token parameter">props</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Text</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> styles<span class="token punctuation">.</span><span class="token property-access">paragraph</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> props<span class="token punctuation">.</span><span class="token property-access">isActive</span> <span class="token operator">&&</span> styles<span class="token punctuation">.</span><span class="token property-access">selected</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">]</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span></code></pre>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="react-native-中的-flex"><a aria-hidden="true" tabindex="-1" href="#react-native-中的-flex"><span class="icon icon-link"></span></a>React Native 中的 Flex</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flexDirection</span><span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>布局是用类似 <code>Flex</code> 的规则定义的，以适应各种屏幕尺寸。Web 上的 <code>Flex</code> 和 React Native 中的 <code>Flex</code> 之间的主要区别在于不需要带有 <code>display: flex</code> 的父元素</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="flexdirection"><a aria-hidden="true" tabindex="-1" href="#flexdirection"><span class="icon icon-link"></span></a>flexDirection</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flexDirection</span><span class="token operator">:</span> <span class="token string">'row'</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>flexDirection 样式属性确定子元素的布局方向和顺序，可以是<code>row</code>、<code>row-reverse</code>、<code>column</code>或<code>column-reverse</code></p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="justifycontent"><a aria-hidden="true" tabindex="-1" href="#justifycontent"><span class="icon icon-link"></span></a>justifyContent</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">flexDirection</span><span class="token operator">:</span> <span class="token string">'row'</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">'flex-start'</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"><span class="token punctuation">}</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">}</span></span> <span class="token punctuation">/></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span></code></pre>
|
||
<p>样式属性决定了子元素在父容器中的定位方式，可以是 <code>center</code>、<code>flex-start</code>、<code>flex-end</code>、<code>space-around</code>、<code>space-between</code> 或 <code>space-evenly</code>。</p>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="react-native-中的尺寸"><a aria-hidden="true" tabindex="-1" href="#react-native-中的尺寸"><span class="icon icon-link"></span></a>React Native 中的尺寸</h3><div class="wrap-body">
|
||
<pre class="language-jsx"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">50</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'powderblue'</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<p>默认所有尺寸都是<pur><strong>无单位</strong></pur>的，并且表示与密度无关的像素</p>
|
||
</div></div></div></div></div><div class="wrap h2body-exist"><div class="wrap-header h2wrap"><h2 id="props"><a aria-hidden="true" tabindex="-1" href="#props"><span class="icon icon-link"></span></a>Props</h2><div class="wrap-body">
|
||
</div></div><div class="h2wrap-body"><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="view-style-props"><a aria-hidden="true" tabindex="-1" href="#view-style-props"><span class="icon icon-link"></span></a>View Style Props</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
<pre class="wrap-text"><code class="language-jsx code-highlight"><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token maybe-class-name">React</span></span> <span class="token keyword module">from</span> <span class="token string">"react"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">View</span><span class="token punctuation">,</span> <span class="token maybe-class-name">StyleSheet</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">"react-native"</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword module">export</span> <span class="token keyword module">default</span> <span class="token keyword">function</span> <span class="token function"><span class="token maybe-class-name">ViewStyle</span></span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>
|
||
</span><span class="code-line"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">View</span></span> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>styles<span class="token punctuation">.</span><span class="token property-access">container</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span><span class="token plain-text">
|
||
</span></span><span class="code-line"><span class="token plain-text"> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span><span class="token class-name">View</span></span><span class="token punctuation">></span></span>
|
||
</span><span class="code-line"> <span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span>
|
||
</span><span class="code-line">
|
||
</span><span class="code-line"><span class="token keyword">const</span> styles <span class="token operator">=</span> <span class="token maybe-class-name">StyleSheet</span><span class="token punctuation">.</span><span class="token method function property-access">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">container</span><span class="token operator">:</span> <span class="token punctuation">{</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">flex</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">justifyContent</span><span class="token operator">:</span> <span class="token string">"space-between"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">"#fff"</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"> <span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
</span><span class="code-line"><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>backfaceVisibility</code></td><td><a href="https://reactnative.dev/docs/view-style-props#backfacevisibility">#</a></td></tr><tr><td align="left"><code>backgroundColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#backgroundcolor">#</a></td></tr><tr><td align="left"><code>borderBottomColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderbottomcolor">#</a></td></tr><tr><td align="left"><code>borderBottomEndRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderbottomendradius">#</a></td></tr><tr><td align="left"><code>borderBottomLeftRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderbottomleftradius">#</a></td></tr><tr><td align="left"><code>borderBottomRightRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderbottomrightradius">#</a></td></tr><tr><td align="left"><code>borderBottomStartRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderbottomstartradius">#</a></td></tr><tr><td align="left"><code>borderBottomWidth</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderbottomwidth">#</a></td></tr><tr><td align="left"><code>borderColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#bordercolor">#</a></td></tr><tr><td align="left"><code>borderEndColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderendcolor">#</a></td></tr><tr><td align="left"><code>borderLeftColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderleftcolor">#</a></td></tr><tr><td align="left"><code>borderLeftWidth</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderleftwidth">#</a></td></tr><tr><td align="left"><code>borderRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderradius">#</a></td></tr><tr><td align="left"><code>borderRightColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderrightcolor">#</a></td></tr><tr><td align="left"><code>borderRightWidth</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderrightwidth">#</a></td></tr><tr><td align="left"><code>borderStartColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderstartcolor">#</a></td></tr><tr><td align="left"><code>borderStyle</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderstyle">#</a></td></tr><tr><td align="left"><code>borderTopColor</code></td><td><a href="https://reactnative.dev/docs/view-style-props#bordertopcolor">#</a></td></tr><tr><td align="left"><code>borderTopEndRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#bordertopendradius">#</a></td></tr><tr><td align="left"><code>borderTopLeftRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#bordertopleftradius">#</a></td></tr><tr><td align="left"><code>borderTopRightRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#bordertoprightradius">#</a></td></tr><tr><td align="left"><code>borderTopStartRadius</code></td><td><a href="https://reactnative.dev/docs/view-style-props#bordertopstartradius">#</a></td></tr><tr><td align="left"><code>borderTopWidth</code></td><td><a href="https://reactnative.dev/docs/view-style-props#bordertopwidth">#</a></td></tr><tr><td align="left"><code>borderWidth</code></td><td><a href="https://reactnative.dev/docs/view-style-props#borderwidth">#</a></td></tr><tr><td align="left"><code>elevation</code> <em>Android</em></td><td><a href="https://reactnative.dev/docs/view-style-props#elevation-android">#</a></td></tr><tr><td align="left"><code>opacity</code></td><td><a href="https://reactnative.dev/docs/view-style-props#opacity">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-2"><div class="wrap-header h3wrap"><h3 id="text-style-props"><a aria-hidden="true" tabindex="-1" href="#text-style-props"><span class="icon icon-link"></span></a>Text Style Props</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-2-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>color</code></td><td><a href="https://reactnative.dev/docs/text-style-props#color">#</a></td></tr><tr><td align="left"><code>fontFamily</code></td><td><a href="https://reactnative.dev/docs/text-style-props#fontfamily">#</a></td></tr><tr><td align="left"><code>fontSize</code></td><td><a href="https://reactnative.dev/docs/text-style-props#fontsize">#</a></td></tr><tr><td align="left"><code>fontStyle</code></td><td><a href="https://reactnative.dev/docs/text-style-props#fontstyle">#</a></td></tr><tr><td align="left"><code>fontWeight</code></td><td><a href="https://reactnative.dev/docs/text-style-props#fontweight">#</a></td></tr><tr><td align="left"><code>includeFontPadding</code> <em>Android</em></td><td><a href="https://reactnative.dev/docs/text-style-props#includefontpadding-android">#</a></td></tr><tr><td align="left"><code>fontVariant</code></td><td><a href="https://reactnative.dev/docs/text-style-props#fontvariant">#</a></td></tr><tr><td align="left"><code>letterSpacing</code></td><td><a href="https://reactnative.dev/docs/text-style-props#letterspacing">#</a></td></tr><tr><td align="left"><code>lineHeight</code></td><td><a href="https://reactnative.dev/docs/text-style-props#lineheight">#</a></td></tr><tr><td align="left"><code>textAlign</code></td><td><a href="https://reactnative.dev/docs/text-style-props#textalign">#</a></td></tr><tr><td align="left"><code>textAlignVertical</code> <em>Android</em></td><td><a href="https://reactnative.dev/docs/text-style-props#textalignvertical-android">#</a></td></tr><tr><td align="left"><code>textDecorationColor</code> <em>iOS</em></td><td><a href="https://reactnative.dev/docs/text-style-props#textdecorationcolor-ios">#</a></td></tr><tr><td align="left"><code>textDecorationLine</code></td><td><a href="https://reactnative.dev/docs/text-style-props#textdecorationline">#</a></td></tr><tr><td align="left"><code>textDecorationStyle</code> <em>iOS</em></td><td><a href="https://reactnative.dev/docs/text-style-props#textdecorationstyle-ios">#</a></td></tr><tr><td align="left"><code>textShadowColor</code></td><td><a href="https://reactnative.dev/docs/text-style-props#textshadowcolor">#</a></td></tr><tr><td align="left"><code>textShadowOffset</code></td><td><a href="https://reactnative.dev/docs/text-style-props#textshadowoffset">#</a></td></tr><tr><td align="left"><code>textShadowRadius</code></td><td><a href="https://reactnative.dev/docs/text-style-props#textshadowradius">#</a></td></tr><tr><td align="left"><code>textTransform</code></td><td><a href="https://reactnative.dev/docs/text-style-props#texttransform">#</a></td></tr><tr><td align="left"><code>writingDirection</code> <em>iOS</em></td><td><a href="https://reactnative.dev/docs/text-style-props#writingdirection-ios">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="shadow-props"><a aria-hidden="true" tabindex="-1" href="#shadow-props"><span class="icon icon-link"></span></a>Shadow Props</h3><div class="wrap-body">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>shadowColor</code></td><td><a href="https://reactnative.dev/docs/shadow-props#shadowcolor">#</a></td></tr><tr><td align="left"><code>shadowOffset</code> <em>iOS</em></td><td><a href="https://reactnative.dev/docs/shadow-props#shadowoffset-ios">#</a></td></tr><tr><td align="left"><code>shadowOpacity</code> <em>iOS</em></td><td><a href="https://reactnative.dev/docs/shadow-props#shadowopacity-ios">#</a></td></tr><tr><td align="left"><code>shadowRadius</code> <em>iOS</em></td><td><a href="https://reactnative.dev/docs/shadow-props#shadowradius-ios">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist row-span-3"><div class="wrap-header h3wrap"><h3 id="layout-props"><a aria-hidden="true" tabindex="-1" href="#layout-props"><span class="icon icon-link"></span></a>Layout Props</h3><div class="wrap-body">
|
||
<!--rehype:wrap-class=row-span-3-->
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>alignContent</code></td><td><a href="https://reactnative.dev/docs/layout-props#aligncontent">#</a></td></tr><tr><td align="left"><code>alignItems</code></td><td><a href="https://reactnative.dev/docs/layout-props#alignitems">#</a></td></tr><tr><td align="left"><code>alignSelf</code></td><td><a href="https://reactnative.dev/docs/layout-props#alignself">#</a></td></tr><tr><td align="left"><code>aspectRatio</code></td><td><a href="https://reactnative.dev/docs/layout-props#aspectratio">#</a></td></tr><tr><td align="left"><code>borderBottomWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#borderbottomwidth">#</a></td></tr><tr><td align="left"><code>borderEndWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#borderendwidth">#</a></td></tr><tr><td align="left"><code>borderLeftWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#borderleftwidth">#</a></td></tr><tr><td align="left"><code>borderRightWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#borderrightwidth">#</a></td></tr><tr><td align="left"><code>borderStartWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#borderstartwidth">#</a></td></tr><tr><td align="left"><code>borderTopWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#bordertopwidth">#</a></td></tr><tr><td align="left"><code>borderWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#borderwidth">#</a></td></tr><tr><td align="left"><code>bottom</code></td><td><a href="https://reactnative.dev/docs/layout-props#bottom">#</a></td></tr><tr><td align="left"><code>direction</code></td><td><a href="https://reactnative.dev/docs/layout-props#direction">#</a></td></tr><tr><td align="left"><code>display</code></td><td><a href="https://reactnative.dev/docs/layout-props#display">#</a></td></tr><tr><td align="left"><code>end</code></td><td><a href="https://reactnative.dev/docs/layout-props#end">#</a></td></tr><tr><td align="left"><code>flex</code></td><td><a href="https://reactnative.dev/docs/layout-props#flex">#</a></td></tr><tr><td align="left"><code>flexBasis</code></td><td><a href="https://reactnative.dev/docs/layout-props#flexbasis">#</a></td></tr><tr><td align="left"><code>flexDirection</code></td><td><a href="https://reactnative.dev/docs/layout-props#flexdirection">#</a></td></tr><tr><td align="left"><code>flexGrow</code></td><td><a href="https://reactnative.dev/docs/layout-props#flexgrow">#</a></td></tr><tr><td align="left"><code>flexShrink</code></td><td><a href="https://reactnative.dev/docs/layout-props#flexshrink">#</a></td></tr><tr><td align="left"><code>flexWrap</code></td><td><a href="https://reactnative.dev/docs/layout-props#flexwrap">#</a></td></tr><tr><td align="left"><code>height</code></td><td><a href="https://reactnative.dev/docs/layout-props#height">#</a></td></tr><tr><td align="left"><code>justifyContent</code></td><td><a href="https://reactnative.dev/docs/layout-props#justifycontent">#</a></td></tr><tr><td align="left"><code>left</code></td><td><a href="https://reactnative.dev/docs/layout-props#left">#</a></td></tr><tr><td align="left"><code>margin</code></td><td><a href="https://reactnative.dev/docs/layout-props#margin">#</a></td></tr><tr><td align="left"><code>marginBottom</code></td><td><a href="https://reactnative.dev/docs/layout-props#marginbottom">#</a></td></tr><tr><td align="left"><code>marginEnd</code></td><td><a href="https://reactnative.dev/docs/layout-props#marginend">#</a></td></tr><tr><td align="left"><code>marginHorizontal</code></td><td><a href="https://reactnative.dev/docs/layout-props#marginhorizontal">#</a></td></tr><tr><td align="left"><code>marginLeft</code></td><td><a href="https://reactnative.dev/docs/layout-props#marginleft">#</a></td></tr><tr><td align="left"><code>marginRight</code></td><td><a href="https://reactnative.dev/docs/layout-props#marginright">#</a></td></tr><tr><td align="left"><code>marginStart</code></td><td><a href="https://reactnative.dev/docs/layout-props#marginstart">#</a></td></tr><tr><td align="left"><code>marginTop</code></td><td><a href="https://reactnative.dev/docs/layout-props#margintop">#</a></td></tr><tr><td align="left"><code>marginVertical</code></td><td><a href="https://reactnative.dev/docs/layout-props#marginvertical">#</a></td></tr><tr><td align="left"><code>maxHeight</code></td><td><a href="https://reactnative.dev/docs/layout-props#maxheight">#</a></td></tr><tr><td align="left"><code>maxWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#maxwidth">#</a></td></tr><tr><td align="left"><code>minHeight</code></td><td><a href="https://reactnative.dev/docs/layout-props#minheight">#</a></td></tr><tr><td align="left"><code>minWidth</code></td><td><a href="https://reactnative.dev/docs/layout-props#minwidth">#</a></td></tr><tr><td align="left"><code>overflow</code></td><td><a href="https://reactnative.dev/docs/layout-props#overflow">#</a></td></tr><tr><td align="left"><code>padding</code></td><td><a href="https://reactnative.dev/docs/layout-props#padding">#</a></td></tr><tr><td align="left"><code>paddingBottom</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddingbottom">#</a></td></tr><tr><td align="left"><code>paddingEnd</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddingend">#</a></td></tr><tr><td align="left"><code>paddingHorizontal</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddinghorizontal">#</a></td></tr><tr><td align="left"><code>paddingLeft</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddingleft">#</a></td></tr><tr><td align="left"><code>paddingRight</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddingright">#</a></td></tr><tr><td align="left"><code>paddingStart</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddingstart">#</a></td></tr><tr><td align="left"><code>paddingTop</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddingtop">#</a></td></tr><tr><td align="left"><code>paddingVertical</code></td><td><a href="https://reactnative.dev/docs/layout-props#paddingvertical">#</a></td></tr><tr><td align="left"><code>position</code></td><td><a href="https://reactnative.dev/docs/layout-props#position">#</a></td></tr><tr><td align="left"><code>right</code></td><td><a href="https://reactnative.dev/docs/layout-props#right">#</a></td></tr><tr><td align="left"><code>start</code></td><td><a href="https://reactnative.dev/docs/layout-props#start">#</a></td></tr><tr><td align="left"><code>top</code></td><td><a href="https://reactnative.dev/docs/layout-props#top">#</a></td></tr><tr><td align="left"><code>width</code></td><td><a href="https://reactnative.dev/docs/layout-props#width">#</a></td></tr><tr><td align="left"><code>zIndex</code></td><td><a href="https://reactnative.dev/docs/layout-props#zindex">#</a></td></tr></tbody></table>
|
||
</div></div></div><div class="wrap h3body-not-exist"><div class="wrap-header h3wrap"><h3 id="image-style-props"><a aria-hidden="true" tabindex="-1" href="#image-style-props"><span class="icon icon-link"></span></a>Image Style Props</h3><div class="wrap-body">
|
||
<pre class="wrap-text"><code class="language-jsx code-highlight"><span class="code-line"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span><span class="token class-name">Image</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">style</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">{</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">resizeMode</span><span class="token operator">:</span> <span class="token string">"contain"</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">200</span>
|
||
</span></span></span><span class="code-line"><span class="token tag"><span class="token script language-javascript"> <span class="token punctuation">}</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"> <span class="token attr-name">source</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"@expo/snack-static/react-native-logo.png"</span><span class="token punctuation">)</span><span class="token punctuation">}</span></span>
|
||
</span></span><span class="code-line"><span class="token tag"><span class="token punctuation">/></span></span>
|
||
</span></code></pre>
|
||
<!--rehype:className=wrap-text-->
|
||
<hr>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<table><thead><tr><th align="left">:-</th><th>--</th></tr></thead><tbody><tr><td align="left"><code>backfaceVisibility</code></td><td><a href="https://reactnative.dev/docs/image-style-props#backfacevisibility">#</a></td></tr><tr><td align="left"><code>backgroundColor</code></td><td><a href="https://reactnative.dev/docs/image-style-props#backgroundcolor">#</a></td></tr><tr><td align="left"><code>borderBottomLeftRadius</code></td><td><a href="https://reactnative.dev/docs/image-style-props#borderbottomleftradius">#</a></td></tr><tr><td align="left"><code>borderBottomRightRadius</code></td><td><a href="https://reactnative.dev/docs/image-style-props#borderbottomrightradius">#</a></td></tr><tr><td align="left"><code>borderColor</code></td><td><a href="https://reactnative.dev/docs/image-style-props#bordercolor">#</a></td></tr><tr><td align="left"><code>borderRadius</code></td><td><a href="https://reactnative.dev/docs/image-style-props#borderradius">#</a></td></tr><tr><td align="left"><code>borderTopLeftRadius</code></td><td><a href="https://reactnative.dev/docs/image-style-props#bordertopleftradius">#</a></td></tr><tr><td align="left"><code>borderTopRightRadius</code></td><td><a href="https://reactnative.dev/docs/image-style-props#bordertoprightradius">#</a></td></tr><tr><td align="left"><code>borderWidth</code></td><td><a href="https://reactnative.dev/docs/image-style-props#borderwidth">#</a></td></tr><tr><td align="left"><code>opacity</code></td><td><a href="https://reactnative.dev/docs/image-style-props#opacity">#</a></td></tr><tr><td align="left"><code>overflow</code></td><td><a href="https://reactnative.dev/docs/image-style-props#overflow">#</a></td></tr><tr><td align="left"><code>overlayColor</code></td><td><a href="https://reactnative.dev/docs/image-style-props#overlaycolor-android">#</a></td></tr><tr><td align="left"><code>resizeMode</code></td><td><a href="https://reactnative.dev/docs/image-style-props#resizemode">#</a></td></tr><tr><td align="left"><code>tintColor</code></td><td><a href="https://reactnative.dev/docs/image-style-props#tintcolor">#</a></td></tr></tbody></table>
|
||
</div></div></div></div></div></div><script src="https://giscus.app/client.js" data-repo="jaywcjlove/reference" data-repo-id="R_kgDOID2-Mw" data-category="Q&A" data-category-id="DIC_kwDOID2-M84CS5wo" data-mapping="pathname" data-strict="0" data-reactions-enabled="1" data-emit-metadata="0" data-input-position="bottom" data-theme="dark" data-lang="zh-CN" crossorigin="anonymous" async></script><div class="giscus"></div></div><footer class="footer-wrap"><footer class="max-container">© 2022 <a href="https://wangchujiang.com/#/app" target="_blank">Kenny Wang</a>.</footer></footer><script src="../data.js?v=1.5.4" defer></script><script src="../js/fuse.min.js?v=1.5.4" defer></script><script src="../js/main.js?v=1.5.4" defer></script><div id="mysearch"><div class="mysearch-box"><div class="mysearch-input"><div><svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" viewBox="0 0 18 18">
|
||
<path fill="currentColor" d="M17.71,16.29 L14.31,12.9 C15.4069846,11.5024547 16.0022094,9.77665502 16,8 C16,3.581722 12.418278,0 8,0 C3.581722,0 0,3.581722 0,8 C0,12.418278 3.581722,16 8,16 C9.77665502,16.0022094 11.5024547,15.4069846 12.9,14.31 L16.29,17.71 C16.4777666,17.8993127 16.7333625,18.0057983 17,18.0057983 C17.2666375,18.0057983 17.5222334,17.8993127 17.71,17.71 C17.8993127,17.5222334 18.0057983,17.2666375 18.0057983,17 C18.0057983,16.7333625 17.8993127,16.4777666 17.71,16.29 Z M2,8 C2,4.6862915 4.6862915,2 8,2 C11.3137085,2 14,4.6862915 14,8 C14,11.3137085 11.3137085,14 8,14 C4.6862915,14 2,11.3137085 2,8 Z"></path>
|
||
</svg><input id="mysearch-input" type="search" placeholder="搜索" autocomplete="off"><div class="mysearch-clear"></div></div><button id="mysearch-close" type="button">搜索</button></div><div class="mysearch-result"><div id="mysearch-menu"></div><div id="mysearch-content"></div></div></div></div></body>
|
||
</html>
|