React Native 基础练习指北（一）

nidaye 发布于2019-08-21 10:29 / 1380人阅读

摘要：围观本文需自备，，以及。使用打开，并点击，会看到模拟器以及此项目对应的内容，效果如下如果想要修改显示内容，请打开，里面是一堆模样的东西。接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改。

原文链接：http://www.tinghaige.com/

本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。

围观本文需自备Mac OSX ， XCode ， node 以及 npm 。

做好准备之后，打开你的终端（或其他命令行利器），键入下面命令：

npm install -g react-native-cli

和

react-native init AwesomeProject

此时，我们会看到一个名为AwesomeProject的文件夹，这就是工程文件的位置。使用XCode打开AwesomeProject.xcodeproj，并点击RUN，会看到iOS模拟器以及此项目对应的内容，效果如下：

如果想要修改显示内容，请打开index.ios.js，里面是一堆Javascript模样的东西。修改之后，在iOS模拟器中cmd+R就可以看到修改后的效果。

接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改index.ios.js。

一、模拟数据

在var React = require("react-native");后面，我们先模拟一下海报所需要的数据：

var MOCKED_MOVIES_DATA = [
  {title: "Title", year: "2015", posters: {thumbnail: "http://i.imgur.com/UePbdph.jpg"}},
];

二、渲染

我们需要展示电影的标题、年份以及缩略图，因此我们需要下面这些东西（看起来也不难理解）：

var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
} = React;

下面，为了展示我们需要的内容，我们来修改一下render部分的内容。

render: function() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
        
        {movie.title}
        {movie.year}
        
       
    )
}

最直观的感受，就像是我们在Javascript代码中写了HTML代码，看起来类似于

。（此时在iOS模拟器中cmd+R可以看到不带样式的效果）

接下来，我们为渲染出来的数据添加样式：

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

我们可以使用flex来进行布局，看起来是个好消息。

在这时候，教程说，海报图片（）还没有添加样式，我们找到，添加上style={styles.thumbnail}也就是变成下面的样子：

此时在模拟器中cmd+R，可以看到效果如下：

这还没完，我们可以以一种更优美的方式来展示电影的信息，就是下面这个结构：

+---------------------------------+
|+-------++----------------------+|
||       ||        Title         ||
|| Image ||                      ||
||       ||        Year          ||
|+-------++----------------------+|
+---------------------------------+

我们只需要修改一下render部分return的内容以及样式styles的部分内容：

return (
    
      
      
        {movie.title}
        {movie.year}
      
    
);

修改styles中container部分：

container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
},

在styles中添加rightContainer：

rightContainer: {
    flex: 1,
},

样式内容写在styles对象中，不要忘记写,。

下面优化一下年份和标题的样式：

title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: "center",
},
year: {
    textAlign: "center",
},

此时在模拟器中cmd+R，可以看到效果如下：

下次我们聊聊如何取回真实数据，当然，下次不一定是什么时候（LOL）。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85619.html

React Native 基础练习指北（二）

摘要：承接上文基础练习指北一，我们来看看如果通过接口获取线上数据并展示。如果使用无法刷新效果，请检查的权限设置。会在组件加载完成后，使用方法发送请求，并且只发送一次。牢记在最后要使用，否则不会出现错误提示。下一步在返回的对象中添加空的。承接上文《React Native 基础练习指北（一）》，我们来看看React Native如果通过接口获取线上数据并展示。 Tips: 如果使用cm...

shixinzhang 2019-08-21 10:29 评论0 收藏0
AE动画转Web代码工具指北-Lottie

摘要：简单来说，就是一个可以将动画转成可运行在上的插件。使用工具使用前请确保已安装这以下工具。更详细内容可参考官网库最后再分项目框架提供两个的库简介 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，...

SexySix 2019-08-23 17:14 评论0 收藏0
ES6指北【6】——详谈解构赋值【附赠练习题】

摘要：指北详谈解构赋值附赠练习题一何谓解构赋值基本概念首先我们看一下给的定义解构赋值语法是一个表达式，这使得可以将值从数组或属性从对象提取到不同的变量中从定义中，我们可以发现解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用数组将数组中的 ES6指北【6】——详谈解构赋值【附赠练习题】一、何谓解构赋值？ 1. 基本概念首先我们看一下MDN给的定义解构赋值语法是一个 Javasc...

sorra 2019-08-23 11:33 评论0 收藏0
2017-10-19 前端日报

摘要：前端日报精选源码解析一组件的实现与挂载写在的前端数据层不完全指北非时圆角边框剪裁问题专题之解读排序源码中的闭包再也不用担心面试被问什么是闭包了中文路由路由基础入门实战操作详细指南前端学习教程用实现一门编程语言语言简介众成翻译第 2017-10-19 前端日报精选 React源码解析(一):组件的实现与挂载写在2017的前端数据层不完全指北Chrome opacity非1时border...

v1 2019-08-21 17:07 评论0 收藏0
Java unsafe操作指北

摘要：本文主要介绍下中的主要操作。所谓的内存屏障，是之虚拟机在对于这样的语句，在及后续写入操作执行前，保证的写入操作对其它处理器可见。是会插入的内存屏障，效率略低本篇为俺的课堂基础手写的前置知识，欢迎大家围观 Unsafe是Java无锁操作的基石，在无锁并发类中都少不了它们的身影，比如ConcurrentHashMap, ConcurrentLinkedQueue, 都是由Unsafe类来实...

StonePanda 2019-08-15 14:52 评论0 收藏0