React Native

Page 1 of 1

Archives

文件夹

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 地理位置搜索 在 Xcode 中,打开 Info.plist 添加一个新的 key,在编辑器内部单击鼠标右键并且选择 Add Row。使用NSLocationWhenInUseUsageDescription 作为 key 名并且使用下面的值: PropertyFinder would like to use your location to find nearby properties 下面是当你添加了新的 key 后,所得到的属性列表: 你将把这个关键的细节提示呈现给用户,方便他们请求访问当前位置。 打开 SearchPage.js,找到用于渲染 Location 按钮的TouchableHighlight,然后为其添加下面的属性值: onPress={this.onLocationPressed.bind(this)} […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 可点击样式 这些 React Native 的原生代码现在应该理解起来轻车熟路了,所以本教程将会加快速度。 在 SearchResults.js 中,destructuring 声明后面添加以下语句来定义样式: var styles = StyleSheet.create({ thumb: { width: 80, height: 80, marginRight: 10 }, textContainer: { flex: 1 }, separator: { height: 1, backgroundColor: […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 著作权归作者所有。 商业转载请联系作者获得授权,非商业转载请注明出处。 作者:kmokidd 链接:http://zhuanlan.zhihu.com/FrontendMagazine/19996445 来源:知乎 执行 API 请求 还是 SearchPage.js 文件中,更新构造器中的初始 state 添加一个message 变量: this.state = { searchString: ‘london’, isLoading: false, message: ” }; 在 render 内部,将下面的代码添加到 UI 的底部: <Text style={styles.description}>{this.state.message}</Text> 你需要使用这个为用户展示多种信息。 […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 添加组件状态 每个 React 组件都带有一个key-value存储的状态对象,你必须在组件渲染之前设置其初始状态。 在 SearchPage.js 中,我们对 SearchPage 类中,render方法前添加以下的代码。 constructor(props) { super(props); this.state = { searchString: ‘london’ }; } 现在你的组件拥有一个状态变量:searchString ,且初始值被设置为 london 。 这时候你需要利用起组件中的状态了。在render方法中,用以下的代码替换TextInput元素中的内容: <TextInput style={styles.searchInput} value={this.state.searchString} placeholder=’Search via name or postcode’/> […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 你好 JSX 的世界 你当前的应用程序会使用 React.createElement 来构建应用 UI ,React会将其转换到原生环境中。在当前情况下,你的JavaScript代码是完全可读的,但一个更复杂的 UI 与嵌套的元素将迅速使代码变成一大坨。 确保应用程序仍在运行,然后回到你的文本编辑器中,编辑 PropertyFinderApp.js 。修改组件 render 方法的返回语句如下: return <React.Text style={styles.text}>Hello World (Again)</React.Text>; 这是 JSX ,或 JavaScript 语法扩展,它直接在你的 JavaScript 代码中混合了类似 HTML 的语法;如果你是一个 web 开发人员,应该对此不陌生。在本篇文章中你将一直使用 JSX […]

本文案例、代码及主要内容基于知乎前端专栏翻译的文章《深入浅出React Native:使用JavaScript构建原生应用》《Introducing React Native: Building Apps with JavaScript》而写。 在原文的基础上做了一些校对,并增加了android得环境安装和调试的内容。 由我书写的注释将会显示左边这个紫色竖线(#523f6d),而原文的注释为蓝色的(#559bce)。 内容传送门 一、《深入浅出R跟我学用React Native构建原生应用(一) 二、《深入浅出R跟我学用React Native构建原生应用(二) 三、《深入浅出R跟我学用React Native构建原生应用(三) 四、《深入浅出R跟我学用React Native构建原生应用(四) 五、《深入浅出R跟我学用React Native构建原生应用(五) 六、《深入浅出R跟我学用React Native构建原生应用(六) 数月前,Facebook 对外宣布了正在开发的 React Native 框架,这个框架允许你使用 JavaScript 开发原生的 iOS 应用——就在今天,Beta 版的仓库释出了!基于 PhoneGap 使用 JavaScript 和 HTML5 开发 iOS 应用已经有好几年了,那 React Native 有什么牛的?React Native 真的很牛,让大家兴奋异常的主要原因有两点: 可以基于 React Native使用 JavaScript 编写应用逻辑,UI 则可以保持全是原生的。这样的话就没有必要就 HTML5 的 UI […]