用户登录

TextInput 是 React Native 里面的文本框组件,你可以使用它向用户收集一些文本内容 .. 这个组件有一些属性可以控制组件的功能,比如你可以使用自动纠正功能,自动大写 .. 可以设置键盘的类型, 在这个组件上在,还可以添加一些回调函数 .. 使用它们去设置发生不同的事情要执行的动作 ..

打开 index.ios.js .. 这里先把这个标签作为默认选择的标签 .. 把 selectedTab 这个状态的默认的值设置成 search  .. 保存 ..

再打开 app/Components 下面的 SearchForm.js .. 在这个组件里,我们用一下 TextInput 组件 .. 先把它从 React 里面提取出来 .. 输入一个 TextInput ..

然后在组件的 render 方法里,简单修改一下 .. 把最外面的这个 View 包装的样式,设置成 styles.container .. 再给它添加点行内的样式 ..

添加一个 60 的内边距 .. paddingTop .. 设置成 60 ..

在它里面,可以用一下 TextInput 这个组件 .. 组件上面添加点样式 .. 这里还是先用一些行内样式,以后我们可以把这些样式整理到专门的样式文件里 ..

先设置一下它的高度,用一个 height 属性 .. 设置成 50 .. 再给它添加一个 placeholder 属性 .. 它可以设置一下文本框里的点位符文字 .. 设置成 搜索 ..

现在这里就会显示一个文本框 .. 点击 .. 可以在里面输入点内容 ... 在 iOS 模拟器,使用快捷键 command + K ,可以切换显示键盘 ..

文本框组件 - TextInput《 React Native #3 文本框 》

统计

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

社会化网络

关于

微信订阅号

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