react native 基础(二)
一.JSON输出(列表输出)let appData=require("./appData.json"); //导入JSON文件
export default class ReacrtNativeProject extends Component {
render() {
return (
<View style={styles.container}>
{this.returnAllBao()} //执行方法,改方法返回的是一个数组.
</View>
);
}
returnAllBao(){
let aLLarr=[]; //声明一个数组
for(let i=0;i<appData.data.length;i++){
let badge=appData.data[i];
aLLarr.push( //向数组中push组件.
<View key={i}> //注意在这里需要给每个数组的元素增加一个key为唯一的标识
<Text style={styles.cc}>{badge.name}</Text>
<Text style={styles.cc}>{badge.text}</Text>
</View>
);
}
return aLLarr; //返回一个数组
}
}
二.TextInput组件
export default class ReacrtNativeProject extends Component {
constructor(props){
super(props);
this.state={text:""};
}
render() {
return (
<View style={styles.container}>
<TextInput style={{height:40,width:200}} placeholder="我是一个input" onChangeText={(text) => {
console.log(text)}
} onSubmitEditing={(){console.log("按下去了")}}/>
</View>
);
}
}
又，在安卓上如果设置 又又，在安卓上长按选择文本会导致 .......详见官网 三.引用外部JS文件(组件)①方法 导出的js文件中
//定义一个类
class loginView extends Component {
constructor(props){
super(props);
this.state={text:""};
}
render() {
return (
<View style={styles.container}>
<Image style={styles.userimg} source={require('./img/user.png')} />
</View>
);
}
}
module.exports=loginView;//导出一个类,这是commomJS的语法
导入的JS文件中
let Userimg=require("./loginView"); //引入外部文件,这是commomJS的语法
②方法 导出的js文件中
//ES6的语法export default导出模块
export default class loginView extends Component {
constructor(props){
super(props);
this.state={text:""};
}
render() {
return (
<View style={styles.container}>
<Image style={styles.userimg} source={require('./img/user.png')} />
</View>
);
}
}
导入的JS文件中
import Userimg from "./loginView"; //导入外部模块，这是ES6语法
四。处理触摸事件移动应用上的用户交互基本靠“摸”。当然，“摸”也是有各种姿势的：在一个按钮上点击，在一个列表上滑动，或是在一个地图上缩放。 React Native提供了可以处理常见触摸手势（例如点击或滑动）的组件， 以及可用于识别更复杂的手势的完整的手势响应系统。 可点击的组件： 在需要捕捉用户点击操作时，可以使用"Touchable"开头的一系列组件。这些组件通过 属性: onPress（点击） onPressIn(按下) onPressOut(抬起) onLongPress(长按不放) 示例： class MyButton extends Component {
_onPressButton() {
console.log("You tapped the button!");
}
render() {
return (
//注意这里onPress是一个事件,不要加括号.以后类似事件如果有自带参数的话会自动传参数到你的自定义函数中
<TouchableHighlight onPress={this._onPressButton}>
<Text>Button</Text>
</TouchableHighlight>
);
}
}
//上面注意onPress是一个事件,以后类似事件如果有自带参数的话会自动传参数到你的自定义函数中
//如果还要传自己的参数则(先执行onPress本身的函数,再去触发外部的一个函数并传参数):
<TouchableHighlight onPress={()=>{this._onPressButton("我的参数")}}>
<Text>Button</Text>
</TouchableHighlight>
可点击的组件需要给用户提供视觉反馈，例如是哪个组件正在响应用户的操作，以及当用户抬起手指后会发生什么。用户也应该可以通过把手指移到一边来取消点击操作。 具体使用哪种组件，取决于你希望给用户什么样的视觉反馈：
在列表中上下滑动和在视图上左右滑动： 可滚动的列表是移动应用中一个常见的模式。用户会在列表中或快或慢的各种滑动。ScrollView组件可以满足这一需求。 ScrollView可以在垂直或水平方向滚动，还可以配置 ListView则是一种特殊的ScrollView，用于显示比较长的垂直列表。它还可以显示分区块的头部和尾部，类似iOS上的 双指缩放: 如果在ScrollView中只放置一个组件，则可以用来实现缩放操作。设置 处理其他的手势: 如果你想实现视图的拖拽，或是实现自定义的手势，那么请参阅PanResponderAPI或是手势识别系统的文档。 详细见官网...... 五.弹窗AlertIOS:ios中使用，每个按钮还都可以指定自己的样式---只能在ios中使用; ios和Android都可用都可用:Alert Alert用法（跨平台）: ios 在iOS上你可以指定任意数量的按钮。每个按钮还都可以指定自己的样式，此外还可以指定提示的类别。参阅AlertIOS来了解更多细节。 Android 在Android上最多能指定三个按钮，这三个按钮分别具有“中间态”、“消极态”和“积极态”的概念： 如果你只指定一个按钮，则它具有“积极态”的属性（比如“确定”）；两个按钮，则分别是“消极态”和“积极态”（比如“取消”和“确定”）；三个按钮则意味着“中间态”、“消极态”和“积极态”（比如“稍候再说”，“取消”，“确定”）。 在Android上默认情况下点击提示框的外面会自动取消提示框。你可以提供一个额外参数来处理这一事件： 还有另外一个参数也可以用来阻止提示框被自动取消，即 一个简单的例子： // iOS和Android上都可用
Alert.alert(
'Alert Title','My Alert Msg',[
{text: 'Ask me later',onPress: () => console.log('Ask me later pressed')},{text: 'Cancel',onPress: () => console.log('Cancel Pressed'),style: 'cancel'},{text: 'OK',onPress: () => console.log('OK Pressed')},],{ cancelable: false }
)
方法： static alert(title: string,message?: string,button?: Buttons,type?: AlertType) Alert效果(上图简单例子的效果) AlertIOS用法： AlertIOS.alert(title: string,buttons?: Array<{
text?: string;
onPress?: ?Function;
style?: AlertButtonStyle;
}>,type?: AlertType
)
//提示用户输入一些文字.
AlertIOS.prompt(title: string,value?: string,callback?: Function
)
例子： AlertIOS.alert(
'我是头部',"我是提示我是提示",[
{text:"等等",onPress:() => {console.log("等等")}},{text:"cancel",onPress:() => {console.log("等等")},style:"cancel"},{text:"ok",onPress:() => {console.log("ok")}},]
)
//提示用户输入的弹窗口,会弹出带有输入框的弹出框
AlertIOS.prompt(
"我是头部","我是内容",[
{text:"等等",styles:"cancel"},//这里是弹窗类型,取值:
//login-password:会弹出登录带有两个输入框,//secure-text:会弹出带有一行密码输入框,//default:没有带输入框，
//plain-text//普通文本
"login-password",//这里是默认值
"123456"
)
六.ref属性，获取指定的元素或者对象export default class QQLogin extends Component {
constructor(props){
super(props);
}
render() {
return (
//ref标记
<View ref={"topView"} style={styles.container}>
<Text style={styles.hello}>哈喽</Text>
//注意这里有bind(this)
<TouchableOpacity activeOpacity={0.5} onPress={this.realDom.bind(this)}>
<Text style={styles.clickme}>点击我获取topView真实DOM</Text>
</TouchableOpacity>
</View>
);
}
realDom(){
//取到ref为topView到真实DOM
console.log(this.refs.topView)
}
}
七.生命周期-getDefaultProps和this.props定义默认参数getDefaultProps是ES5写法。是组建开始时执行的函数（定义在组建中）。 ES可在getDefaultProps定义一些不可修改的变量，ES5是定义在getDefaultProps中。ES6是写在组建外：见下图：
八.ScrollView(滚动视图)子元素为多个要滚动的视图 属性:contentContainerStyle={styles.contentContainer} //设置列表容器的属性 return (
<ScrollView contentContainerStyle={styles.contentContainer}>
</ScrollView>
);
...
var styles = StyleSheet.create({
contentContainer: {
paddingVertical: 20
}
});
更多参数详细见官网.... onScrollBeginDrag：当手开始拖拽onScrollEndDrag:当手结束拖拽求出水平方向的偏移量:e.nativeEvent.contentOffset.x;求出垂直方向的偏移量:e.nativeEvent.contentOffset.y;（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |