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组件

TextInput是一个允许用户输入文本的基础组件。它有一个名为onChangeText的属性，此属性接受一个函数，而此函数会在文本变化时被调用。另外还有一个名为onSubmitEditing的属性，会在文本被提交后（用户按下软键盘上的提交键）调用。

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>
    );
  }
}

TextInput在安卓上默认有一个底边框，同时会有一些padding。如果要想使其看起来和iOS上尽量一致，则需要设置padding: 0，同时设置underlineColorAndroid="transparent"来去掉底边框。

又，在安卓上如果设置multiline = {true}，文本默认会垂直居中，可设置textAlignVertical: 'top'样式来使其居顶显示。

又又，在安卓上长按选择文本会导致windowSoftInputMode设置变为adjustResize，这样可能导致绝对定位的元素被键盘给顶起来。要解决这一问题你需要在AndroidManifest.xml中明确指定合适的windowSoftInputMode(https://developer.android.com/guide/topics/manifest/activity-element.html)值，或是自己监听事件来处理布局变化。

.......详见官网

三.引用外部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(点击事件属性)属性接受一个点击事件的处理函数。当一个点击操作开始并且终止于本组件时（即在本组件上按下手指并且抬起手指时也没有移开到组件外），此函数会被调用。

属性: 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>

可点击的组件需要给用户提供视觉反馈，例如是哪个组件正在响应用户的操作，以及当用户抬起手指后会发生什么。用户也应该可以通过把手指移到一边来取消点击操作。

具体使用哪种组件，取决于你希望给用户什么样的视觉反馈：

一般来说，你可以使用TouchableHighlight来制作按钮或者链接。注意此组件的背景会在用户手指按下时变暗。
在Android上还可以使用TouchableNativeFeedback，它会在用户手指按下时形成类似墨水涟漪的视觉效果。
TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。
如果你想在处理点击事件的同时不显示任何视觉反馈，则需要使用TouchableWithoutFeedback。

在列表中上下滑动和在视图上左右滑动：

可滚动的列表是移动应用中一个常见的模式。用户会在列表中或快或慢的各种滑动。ScrollView组件可以满足这一需求。

ScrollView可以在垂直或水平方向滚动，还可以配置pagingEnabled属性来让用户整屏整屏的滑动。此外，水平方向的滑动还可以使用Android上的ViewPagerAndroid组件。

ListView则是一种特殊的ScrollView，用于显示比较长的垂直列表。它还可以显示分区块的头部和尾部，类似iOS上的UITableView控件。

双指缩放:

如果在ScrollView中只放置一个组件，则可以用来实现缩放操作。设置maximumZoomScale和minimumZoomScale属性即可以使用户能够缩放其中的内容。

处理其他的手势:

如果你想实现视图的拖拽，或是实现自定义的手势，那么请参阅PanResponderAPI或是手势识别系统的文档。

详细见官网......

五.弹窗

AlertIOS:ios中使用，每个按钮还都可以指定自己的样式---只能在ios中使用;

ios和Android都可用都可用:Alert

Alert用法（跨平台）:

ios

在iOS上你可以指定任意数量的按钮。每个按钮还都可以指定自己的样式，此外还可以指定提示的类别。参阅AlertIOS来了解更多细节。

Android

在Android上最多能指定三个按钮，这三个按钮分别具有“中间态”、“消极态”和“积极态”的概念：

如果你只指定一个按钮，则它具有“积极态”的属性（比如“确定”）；两个按钮，则分别是“消极态”和“积极态”（比如“取消”和“确定”）；三个按钮则意味着“中间态”、“消极态”和“积极态”（比如“稍候再说”，“取消”，“确定”）。

在Android上默认情况下点击提示框的外面会自动取消提示框。你可以提供一个额外参数来处理这一事件：{ onDismiss: () => {} }。

还有另外一个参数也可以用来阻止提示框被自动取消，即{ cancelable: false }。

一个简单的例子：

// 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
    }
  });

react native 基础(二)

一.JSON输出(列表输出)

二.TextInput组件

三.引用外部JS文件(组件)

四。处理触摸事件

五.弹窗

六.ref属性，获取指定的元素或者对象

七.生命周期-getDefaultProps和this.props定义默认参数

八.ScrollView(滚动视图)

onScrollBeginDrag：当手开始拖拽

onScrollEndDrag:当手结束拖拽

求出水平方向的偏移量:e.nativeEvent.contentOffset.x;

求出垂直方向的偏移量:e.nativeEvent.contentOffset.y;

猜你在找的React相关文章