2017-03-26 17:52:27 u013147860 阅读数 0
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    25641课时 0分钟 0人学习 刘宏强
    免费试看

1、onPress:接受一个点击事件的处理函数

'use strict';
import React,{Component} from 'react';
import {AppRegistry,Text,Alert,TouchableHighlight} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            <TouchableHighlight onPress={this._onPressButton}>
                <Text>Button</Text>
            </TouchableHighlight>
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);
点击Button文字,会调用_onPressButton方法,然后弹出提示框。

效果图:

TouchableHighlight:此组件的背景会在用户手指按下时变暗


Button字的背景变暗。

TouchableNativeFeedback:它会在用户手指按下时形成类似墨水涟漪的视觉效果

效果:


'use strict';
import React,{Component} from 'react';
import {AppRegistry,View,Text,Alert,TouchableNativeFeedback} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            <TouchableNativeFeedback
                onPress={this._onPressButton}
               >
                <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                    <Text style={{margin: 30}}>Button</Text>
                </View>
            </TouchableNativeFeedback>
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);

TouchableOpacity:会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色


'use strict';
import React,{Component} from 'react';
import {AppRegistry,View,Text,Alert,TouchableOpacity} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            <TouchableOpacity
                onPress={this._onPressButton}
               >
                <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                    <Text style={{margin: 30}}>Button</Text>
                </View>
            </TouchableOpacity>
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);

TouchableWithoutFeedback:处理点击事件的同时不显示任何视觉反馈

'use strict';
import React,{Component} from 'react';
import {AppRegistry,View,Text,Alert,TouchableWithoutFeedback} from 'react-native';
class MyButton extends Component {

    _onPressButton(){
        Alert.alert("onPressButton");
    }
    render() {
        return (
            <TouchableWithoutFeedback
                onPress={this._onPressButton}
               >
                <View style={{width: 150, height: 100, backgroundColor: 'red'}}>
                    <Text style={{margin: 30}}>Button</Text>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}
//MyFirstProject
AppRegistry.registerComponent('MyFirstProject', () => MyButton);


2、ScrollView可以查看之前的一篇博文:http://blog.csdn.net/u013147860/article/details/65972786

pagingEnabled={true}和horizontal={true}一起使用,可以实现分页效果。pagingEnabled默认是false.

效果:


'use strict';
import React,{Component} from 'react';
import {AppRegistry,ScrollView,Text,Image} from 'react-native';
class IScrolledDownAndWhatHappenedNextShockedMe  extends Component{

    render(){
        return(
            <ScrollView horizontal={true}
                        pagingEnabled={true}>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Text style={{fontSize: 96}}>Scroll me plz</Text>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
                <Image source={require('./img/lanbojini.jpg')}/>
            </ScrollView>
        );
    }
}
//MyFirstProject 必须初始化的项目名字
AppRegistry.registerComponent('MyFirstProject',() => IScrolledDownAndWhatHappenedNextShockedMe );


ViewPagerAndroid:水平方向的滑动还可以使用Android上的ViewPagerAndroid 组件。






2018-08-02 19:23:25 weixin_42865887 阅读数 0
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    25641课时 0分钟 0人学习 刘宏强
    免费试看

react-native默认没有keyEvent,这里主要介绍如何实现将keyEvent(按键事件或者遥控器事件)发送给页面:

native java代码:

public class MainActivity extends ReactActivity {

    private void sendEvent(ReactContext reactContext,
                           String eventName,
                           @Nullable WritableMap params) {
        reactContext
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit(eventName, params);
    }

    @Override
    public boolean dispatchKeyEvent(KeyEvent event) {
        ReactContext reactContext = getReactInstanceManager().getCurrentReactContext();
        WritableMap params = Arguments.createMap();
        params.putInt("which", event.getKeyCode());
        if (event.getAction() == KeyEvent.ACTION_DOWN) {
            sendEvent(reactContext, "keydown", params);
        } else if (event.getAction() == KeyEvent.ACTION_UP) {
            sendEvent(reactContext, "keyup", params);
        }
        return super.dispatchKeyEvent(event);
    }
}

js 代码:

  componentDidMount() {
    DeviceEventEmitter.addListener('keydown', function(e) {
      console.log('keycode: '+e.which);
    });
  }
2017-10-09 14:33:35 qq229200 阅读数 1294
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    25641课时 0分钟 0人学习 刘宏强
    免费试看

React Native 中的点击事件

React Native中Text组件有点击事件其他还没有碰见自带点击事件的,
一般用Touchable..来做点击

  • TouchableHighlight 点击会有点击背景颜色
  • TouchableOpacity 点击会有一个渐变透明的效果
  • TouchableWithoutFeedback 毫无效果和Text的onPress一样

上面三个组件中的点击方法有四个

  1. onPress 普通的点击
  2. onPressIn 开始点击 有点像Android里面的onKeyDown刚开始按下的时候调用的方法
  3. onPressOut 像Android里面的onKkeyUp手指在屏幕抬起的瞬间
  4. onLongPress 长按事件
<TouchableHighlight onPress={this.touchable.bind(this,'TouchableHighlight onPress')}
                                   onPressIn={this.touchableIn.bind(this,'TouchableHighlight onPressInt')}
                                   onPressOut={this.touchableOut.bind(this,'TouchableHighlight onPressOut')}
                                   onLongPress={this.longtouchable.bind(this,'TouchableHighlight onLongPress')}>
                   <Text style={styles.item}>TouchableHighlight</Text>
               </TouchableHighlight>

               <TouchableOpacity onPress={this.touchable.bind(this,'TouchableOpacity onPress')}>
                   <Text style={styles.item}>TouchableOpacity</Text>
               </TouchableOpacity>

               <TouchableWithoutFeedback onPress={this.touchable.bind(this,'TouchableWithoutFeedback onPress')}>
                   <Text style={styles.item}>TouchableWithoutFeedback</Text>
               </TouchableWithoutFeedback>
               <Text style={styles.item} onPress={this.touchable.bind(this,'Text onPress')}>Text自带的点击事件</Text>

需要更加详细的请参考网址https://www.race604.com/react-native-touch-event/

2019-03-25 20:23:47 NiuAGeNiuC 阅读数 1472
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    25641课时 0分钟 0人学习 刘宏强
    免费试看
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    Button,
    Image,
    TouchableOpacity,
    Alert
} from 'react-native';


const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
    android:
        'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menu',
});

const imgae_url = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1553526121837&di=bad1e61c7c7c590a1c758c6a2a68bc6e&imgtype=0&src=http%3A%2F%2Fzkres1.myzaker.com%2F201812%2F5c026780622768eda6008803_640.jpg';

type Props = {};
export default class App extends Component<Props> {

    state = {
        likes: 0
    };

    onPress = () => {
        const {likes} = this.state;
        this.setState({likes: likes + 1});
    };


    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}
                      onPress={() => {
                          // Alert.alert("点击了我");
                          Alert.alert("标题不能为空")

                      }}>
                    Welcome to React Native!

                </Text>

                <TouchableOpacity onPress={this.onPress}>
                    <Image source={{uri:imgae_url}} style={{width:200,height:200,margin:5}}/>

                </TouchableOpacity >
                <Text>
                    {this.state.likes}
                </Text>

                <TextInput
                    style={styles.editContain}
                    {...this.props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
                    editable={true}
                    maxLength={40}
                />


            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },

    editContain: {
        height: 40, borderColor: 'gray', borderWidth: 1, color: '#0000ff', backgroundColor: '#FF0000', minWidth: 100
    },
    thisButton: {
        marginTop: 50
    }

});

 

2017-05-23 09:21:25 qingsong_xu 阅读数 8024
  • 组件基础2

    掌握Vue.js基础知识; 掌握Vue.js核心功能; 掌握Vue.js实战技能;

    25641课时 0分钟 0人学习 刘宏强
    免费试看

比如我们定义一个TouchableOpacity点击事件,该方法需要接收一个参数值,如下

_gotoSubClass(sectionID, rowID) {
    console.log("sectionID="+sectionID + "rowID=" + rowID);
}

那么在TouchableOption组件的onPress属性中应该这样写:

   <TouchableOpacity onPress={() => this._gotoSubClass(sectionID, rowID)}>
       <Text>{rowData.title}</Text>
   </TouchableOpacity>

或者

<TouchableOpacity onPress={this._gotoSubClass.bind(this,sectionID, rowID)}>
       <Text>{rowData.title}</Text>
   </TouchableOpacity>
   其中bind中的参数1:this代表的是上下文对象,后面跟的参数,对应私有方法中的参数顺序。

React添加事件

阅读数 27