欢迎来到Introzo百科

Introzo百科

当前位置：网站首页 > 技术 > 一步一步教你写RN小程序！

一步一步教你写RN小程序！

日期：2023-10-03 01:30

-->

时间过得真快，一转眼已经快3年了！

1.我的第一个应用程序

还记得2014年初写的第一个iOS小程序，是给别人写的独立相册。这也是我开发的第一个完整的应用程序。虽然功能很少，但我还是按耐不住心里的激动。我太激动了。现在开始学习React Native，所以现在对React Native有了一些了解。我将使用在线界面来开发一个小程序。现在我将向您展示如何编写这个程序！接口是知乎的API，简单只搞定。您可以从这里开始。也算是给大家一个入门指南。稍后我会将源码放到我的github上。早期的项目一定很简单，后期慢慢优化吧。好了，废话不多说，坐稳了，开车吧！！！！！

首先你需要一个框架，可以省时省力，不再重复发明轮子。

(1)框架

我们将不再构建框架。之前写了一个很简单的框架，放在github上。我们只需下载并使用它即可。下载地址在我的github上。这个框架是基于react-Native-tab-navigator，要运行这个程序，我们首先要做的是打开终端配置环境

$npm 安装
$npm install react-native-tab-navigator --save

然后我们就可以打开文件并运行程序了

(2)更改姓名

用Xcode打开文件navtabbar.xcodeproj，进入AppDelegate.m文件并放入

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　模块名称：@“navtabbar”
　　　　　　　　　　　　　　　　　　　　　　　　　　　初始属性：nil
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　启动选项:启动选项]; 将

中的moduleName修改为你想要的名称，然后将plist文件中的Bundle名称修改为你修改后的名称。最后也是最重要的一步，打开index.ios.js文件修改注册入口，
AppRegistry .registerComponent('你修改的名字', () => NavIndex)
现在iOS App name已修改，可以运行看看是否修改成功！

2。首页建设

(1)首页界面代码修改

进入login.js文件，删除Login

然后添加图片，稍后我们要为主页设置背景图片，添加

可触摸不透明度、
尺寸、
文本输入

OK，只需添加这些组件即可！

(2)界面搭建

首先我们在src文件夹下新建一个images文件夹来存放我们的图片

现在您可以找到一些图片并保存它们。

然后直接登录即可，当然只是一个界面

placeholder='账户'
placeholderTextColor='灰色'
defaultValue='Demon404'
/>
placeholder='请输入密码'
placeholderTextColor='橙色'
默认值=''
/>

<按钮样式={无数字噪音键1028}
按钮标题=“登录” />

这里的FormText是我自己写的一个小控件。

可以看到下面的界面效果

由于没有发帖请求，所以每个人都可以简单地享受这个页面。反正下一页和本页没有关系了……

(3)首页建设

首页只是一个Tabbar界面。目前，我们正在考虑拥有三个模块！我们将来会考虑删除它们。嗯，就是这么任性！

一个是推送文章模块，一个是搜索模块，最后一个是设置模块。

我们先来看看文章模块的主页

cellRow(数据) {
返回（

<图像风格={无数字噪音键1026}
来源={{uri: data.pic}}
/>
{数据.摘录}

);
} 渲染（）{
返回（

<列表视图
initiaListSize={1}
onEndReachedThreshold={10}
数据源={this.state.dataSource}
renderRow={this.cellRow.bind(this)}
样式={styles.listView}
/>

);
}

这是我们ListView页面的代码。简单抓取一下就看到了知乎的一个界面页面，

如何实现数据同步？

这个是关于组件的生命周期的：一般来说，一个组件类是通过扩展Component创建的，并提供了render方法以及其他可选的生命周期函数，组件相关定义事件或方法。

简单说一下生命周期函数

componentWillMount：只会在加载前调用一次，

会在render之前调用

componentDidMount：只会在加载完成后调用一次，

会在render之后调用

componentWillUnmount：卸载组件时调用，

constructor(props, context)：构造函数，创建组件时调用一次

这些是目前唯一在使用的。当然，这些并不是声明周期调用的唯一函数。这些我们以后再谈。

这里，我们简单的使用componentDidMount，

第一个var GET_URL = 'http://www.introzo.com/getposts';

然后在listView页面定义数据解析方法

componentDidMount(){
this.fetchData();
}

实施：

fetchData(){
获取(GET_URL)
//ES6写法：左边代表输入参数，右边是逻辑处理和返回结果
.then((response) => response.json())
.then((responseData) => {
this.setState({
数据源：this.state.dataSource.cloneWithRows(responseData.posts),
});
})
.done();
}

constructor(props) {
super(props);
//state是内部维护的状态。我们刚刚输入空来加载空视图
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
};
}

，然后根据上面的RowData，就可以实现如下页面效果

图1是我们搭建的首页，图2是详情页。

图1和图2的实现原理是一样的。他们都是使用listView来构建页面，那么如何传递值呢？

Nav有一个属性renderScene，回调方法有两个参数route和navigator。

大家还记得{...route.params}，

我们要做的就是当第一页推送到第二页时这样写，

this.props.navigator.push({
组件：细节，
参数：{nextdata：行数据}，
})

在第二页，可以直接写this.props.nextdata来调用传入的rowdata。那么第二页的实现是不是很难呢？这里就不多说了，

ps：你可以想想为什么renderRow={this.cellRow.bind(this)}这么写？是不是也可以先 renderRow={this.cellRow()} ？

(4)搜索页面建设

我们先看一下图。该模块暂时实现了两个页面的功能。以后我们会慢慢添加。别担心......

首先，我在搜索框中使用了textinput。其实功能是一样的。点击放大镜，将输入框中的内容拼接到界面上，并传递到下一页。直接用接收到的接口就可以解析下一页了。那么如何获取textinput中的值呢？

我们看一下代码

<文本输入
样式={styles.inputStyle}
placeholder="请输入搜索条件！"
onChangeText={(text) => this.setState({text})}
/> 构造函数（道具）{
超级（道具）；
this.state = {text: ''};
}
搜索用户(){
console.log(this.state.text);

看过文档的朋友应该都知道onChangeText是做什么的。我不会详细介绍。列表页面与前面的页面一样。

3.终于

-->

最近发表

猜你喜欢

关灯