用户登录

有了内容以后再去定义上面使用的样式 …

先去定义一下 item 的样式 … 一个 flex 属性。值设置成 1 ,再设置一下 flexDirection ,值是 row .. 添加一个下边的边框 .. borderBottomWidth ,大小是 1 .. 设置一下边框的颜色 .. borderColor … 它的值用一个 rgba … 这种颜色可以包含一个不透明度 …

在下边添加一个内边距 … paddingBottom ,值设置成 6 … 再用一个下边的外边距 … 它的值也是 6 ..

再设置一下 itemContent 的样式 .. 先用一个 flex 属性 .. 它的值设置成 1 ,再给它添加一个左边的外边距 .. marginLeft .. 设置成 13 … marginTop .. 添加一个上边的外边距 .. 值设置成 6

最后再添加一个 flex 属性。它的值设置成 1

然后定义一下 itemHeader … 先设置一下文字的大小 .. fontSize ,设置成 18 ,再设置一下字体 ,用的是 fontFamily ...

再用 fontWeight ,设置一下文字的粗线 .. . 它的值设置成 300 … 再给它设置一种文字的颜色 … 用 color 属性 … #6435c9 … 在它的下面再添加一个外边距,可以使用 marginBottom ,设置成 6 ...

再添加一个 itemMeta 样式 … 先去设置一下文字的大小 … 设置成 16 … 再用一个 color 属性,设置一下文字的颜色 .. 它的值可以使用 rgba ,颜色是黑色,再设置一下不透明度 … 设置成 0.6 … 再文字的下边添加一个外边距 … marginBottom … 值设置成 6 …

再定义一下 redText 样式 … 用一个 color 属性设置一下文字的颜色 .. #db2828 ,一种红色 … 再设置一下文字的大小 .. fontSize,值设置成 15 …

保存 … 现在你会看到一个电影内容的列表 … 上面有电影海报 … 标题 … 还有电影的评分 …

重新整理列表的显示 - 样式《 React Native #1 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点