《React-Native系列》4、表单界面代码编写

最新推荐文章于 2024-07-31 09:58:53 发布

coder_小刀

最新推荐文章于 2024-07-31 09:58:53 发布

阅读量8.6k

点赞数 1

分类专栏： ReactNative ReactNative实战系列文章标签： ReactNative

本文链接：https://blog.csdn.net/codetomylaw/article/details/51946281

版权

今天就开始投入到RN项目了，做后端出生，写Android和iOS确实有点勉强，不过还是要把这段经历记录下来。

要实现的功能界面如下：

这个是最简单的Form表单，第一步实现界面吧，不管点击效果，不管筛选控件...

思路：

我把这几类控件分为了3类：

1、带头像的一行抽取成一个组件

2、带输入框 TextInput的抽象成一个组件

3、带选择项的抽取成一个组件

首页直接引用这3个组件

首页代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';

import TextInputWidget from './TextInputWidget.js';
import TextTipsWidget from './TextTipsWidge