React Native组件讲解一

最新推荐文章于 2024-11-11 13:13:58 发布

原创最新推荐文章于 2024-11-11 13:13:58 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

React Native学习记录专栏收录该内容

6 篇文章

订阅专栏

本文介绍 React Native 中常用的组件，包括 View 和 Text 的使用方法及特性，Touchable 组件的应用场景，以及 TextInput 组件的功能配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常用组件一:

一:View组件

详细见React Native中文官网

在WEB开发中,div是最重要的一个元素,是页面布局的基础

在ReactNative开发中,View组件的作用类似于div,是最基本的组件,被看做是容器组件

eg:

var LessonView = React.creatClass({

render: function() {

return {

</View>

</View>

</View>

</View >

</View>

</View>

};

}

});

var styles = StyleSheet.create({

container: {

marginTop: 25,

backgroundColor:"#F2F2F2",

//多个子组件都需要设置

flex:{

flex:1

//多个组件需要设置

center: {

justifyContent:"center",

alignItems:"center",

item: {

flexDirection:"row",

backgroundColor:"#FF607c",

marginTop:5,

marginLeft:5,

marginRight:5,

height:80,

borderRadius:5

//给中间的区域设置左右边缘

lineLeftRight: {

borderLeftWidth:1,

borderRightWidth:1,

borderColor:"wiite"

//给上半区域设置下边线

lineCenter: {

borderBottomWidth:1,

borderColor:"white"

}

});

二:Text组件

中文官网见详情

常用特性:

onPress 手指触摸事件

numberOfLines 显示多少行

可以设置字体颜色,大小,对齐方式等等

见面布局分为两部分

Header和新闻信息

整个界面是一个组件,有两个子组件组成

如果都写在index.ios.js(android)文件中,代码比较乱

在单独一个文件中定义子组件,使用Module.exports将组件导出为独立的模块

可以在其他文件中引用

//引入header.js

var Header = require("./header");

var News = require("./news");

var LessonText = React.creatClass({

render: function() {

//定义数组存储新闻内容

var news = [

"1,随便添加的新闻"

"2,随便添加的新闻"

"3,随便添加的新闻"

"4,随便添加的新闻"

];

return (

/* Header */

/* News */

</View>

);

}

});

var styles = StyleSheet.creat({

flex: {

flex:1

}

});

****在LessonText 中新建文件header.js

//1,将Impot部分的代码拷贝进来

//2,组件

var Header = React.creatClass({

render: function() {

return {

</Text>

</View>

};

}

});

//3,样式

var styles = StyleSheet.creat({

flex: {

marginTop:25,

height:40,

borderBottomWidth:1,

borderBottomColor:"#EF2D36"

ALIGNiTEMS:"center"

//字体设置的公共部分

font:{

fontSize:25,

fontWeight:"bold",

textAlign:"center",

font_1:{

color:#CD1D1C

font_2:{

color:#FFF,

backgroundColor:"#CD1D1C"

}

});

//4,导出模块

module.exports=header;

****在LessonText 中新建文件news.js

//1,将Impot部分的代码拷贝进来

//2,组件

var News = React.creatClass({

//设置点击条目显示弹出框Alert

show: function(title) {

alert(title);

render: function() {

//定义数组,用于存储设置好的Text组件

var newsComponents = [];

//遍历存储信息的数组,从外部传入的

for (var i in this.props.news) {

var text = (

<Text

onPress={this.show.bind(this,this.props.news[i])}

style={styles.news_item}

numberOfLines={2}

key={i}>

{this.props.news[i]}

</Text>

);

//将设置好的Text存入数组

newComponents.push(text);

}

return {

{newsCoponents}

</View>

};

}

});

//3,样式

var styles = StyleSheet.creat({

flex: {

flex:1,

//"今日要闻"标题

news_title:{

fontSize:20,

fontWeight:"bold",

color:"#CD1D1C",

marginLeft:10,

marginTop:15

//每条新闻

news_item:{

marginTop:10,

marginLeft:10,

marginRight:10,

fontSize:15,

LineHeight:30

}

});

//4,导出模块

module.exports=News;

三:Touchable组件(用于绑定事件)

使用时需要导入组件

React Native 提供3个组件用于给其他没有触摸事件的组件绑定触摸事件

TouchableOpcity:透明触摸,点击时,组件会出现透明过滤效果

TouchableHighlight:高亮触摸,点击时,组件会出现高亮效果

TouchableWithoutFeedback:无反馈触摸,点击时,组件无视觉变化,需要导入组件

eg:搜索输入框

var LessonTouchable = React.creatClass({

//点击按钮显示弹出框

clickBtn: function() {

alert("点击搜索按钮");

render: function() {

return (

</View>

</TouchableOpacity>

</View>

);

}

});

var styles = StyleSheet.creat({

container:{

flexDirction:"row",

height:45,

marginTop:25

flex: {

flex:1

input:{

height:45,

borderWidth:1,

marginLeft:5,

paddingLeft:5,

borderColor:"#ccc",

borderRadius:4

btn:{

width:55,

marginLeft:5,

marginRight:5,

backgroundColor:"#23BEFF",

height:45,

justifyContent:"center",

alignItem:"center"

search:{

color:"#FFF",

fontSize:15,

fontWeight:"bold"

}

});

四:TextInput组件

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.

本组件的属性提供了多种特性的配置,譬如自动完成,自动大小写

占位文字,以及多种不同的键盘类型(如纯数字键盘)等等

常用:

placeholder:占位符

value:输入框的值

password:是否密文输入

editable:输入框是否可编辑

returnKeyType:键盘return键类型

onChange:当文本变化时调用

onEndEditing:当结束编辑时调用

onSubmitEditing:当结束编辑,点击提交按钮时调用

...............

var LessonTextInput = React.createClass({

//记录输入的值

getInitiaState:function() {

return (

inputText:" "

);

//输入框的onChange实现

getContent: function(text) {

this.setState({

inputText: text

});

//按钮方法的实现

clickBtn: function() {

alert(this.state.inputText);

render: function(){

return (

<TextInput

style={styles.input}

returnKeyType="search"

placeholder="请输入内容"

onChangeText={this.getContent}

</View>

</TouchableOpacity>

</View>

);

}

});

var styles = StyleSheet.creat({

container:{

flexDirction:"row",

height:45,

marginTop:25

flex: {

flex:1

input:{

height:45,

borderWidth:1,

marginLeft:5,

paddingLeft:5,

borderColor:"#ccc",

borderRadius:4

btn:{

width:55,

marginLeft:5,

marginRight:5,

backgroundColor:"#23BEFF",

height:45,

justifyContent:"center",

alignItem:"center"

search:{

color:"#FFF",

fontSize:15,

fontWeight:"bold"

}

});