HiDocs
Search K

Appearance

安卓原生属性在 RN 中的体现 ​

文字 ​

文字必须写在 Text 标签里面，Text 不能有其他特殊标签

但是Text 不是行内元素，Android 不区分这个，Text 同样可以设置大小和 margin 等内容！！！

那么就意味着 css 里面很多只能用于行内元素的属性在 android 里面是不能用的！！！比如 verticalAlign 等！

这个特点，会造成很多离谱的报错，比如有时候 vscode 会自动给代码添加;结尾符号，就可能导致这个报错，说文字没有在 Text 标签内！而且报错的时候还不会提示在哪里错了！

所以要注意检查！

image-20240318173836280

文字的换行 ​

jsx
{
  /* <View style={{ flex: 1, flexDirection: "row", flexWrap: "wrap" }}> */
}
<Text style={{ flex: 1 }}>
  {/* TODO 只要设置Text style={{ flex: 1 }}就可以让文字自动换行了 */}
  <Text>我已阅读并同意</Text>
  <Text style={{ color: "#f97316" }}>《隐私协议》</Text>
  <Text>和</Text>
  <Text style={{ color: "#f97316" }}>《软件使用信息服务协议》</Text>
</Text>;
{
  /* </View> */
}

多个 text 只需要外面再套一个 text 然后设置 flex 为 1 即可，用 flexWrap: "wrap"是不行的，它会把整个标签都移下去而不能进行中间截断！

如果不想换行，或者超出显示省略号呢？

<Text> 组件的 ellipsizeMode 和 numberOfLines 属性来控制文本的截断和行数。例如，你可以将 numberOfLines 属性设置为 1，这样文本将只显示一行，并且超出部分将被截断，而不会被换行。另外，你也可以将 ellipsizeMode 属性设置为 tail，这样超出部分将以省略号（...）的形式显示。

注意：但是不能写 css，要写在 Text 标签上面作为属性！

image-20240329224708882

阴影 ​

image-20240314231924432

定位 ​

安卓里面没有绝对定位

所以没办法通过绝对定位把元素定位到当前页面的最下面！

注意：但是 android 里面还是有相对定位的，可以使用 relative 定位来调整元素的位置！！！

image-20240323181612190

布局块 ​

View 和 Text 都不是默认会撑满整行的！

图片 ​

image 标签，必须在 source 属性里面使用 require 属性进行图片加载！不能直接写路径！

块布局 ​

View 必须要设置 flex:1 才能撑起来，否则高度是 0（即便里面有内容，也无法把 View 撑起来），必须设置 flex:1，这样就可以随着里面的内容而撑起来高度了！因为 flex:1 让 View 有了 100%的伸缩性！

就像 div 不设置高度默认是 0 一样，但是 div 可以被撑起来！