React Native学习笔记· 3.交互

这部分文档,我看到有点云里雾里,后续上手需要翻阅一下。

  1. 处理触摸事件。<Button onPress={onPressButton}title="Press Me"/> 长按是采用onLongPress
  2. React Navigation 这个 有点像Taro的Navigator, 后续翻阅文档React Navigation
  3. 动画 ,
    • Animated 使用demo
    import React, { useRef, useEffect } from 'react';
    import { Animated, Text, View } from 'react-native';
    const FadeInView = (props) => {
    const fadeAnim = useRef(new Animated.Value(0)).current  // 透明度初始值设为0

    React.useEffect(() => {
        Animated.timing(                  // 随时间变化而执行动画
        fadeAnim,                       // 动画中的变量值
        {
            toValue: 1,                   // 透明度最终变为1,即完全不透明
            duration: 10000,              // 让动画持续一段时间
        }
        ).start();                        // 开始执行动画
    }, [fadeAnim])

    return (
        <Animated.View                 // 使用专门的可动画化的View组件
        style={{
            ...props.style,
            opacity: fadeAnim,         // 将透明度绑定到动画变量值
        }}
        >
        {props.children}
        </Animated.View>
    );
    }

    // 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
    export default () => {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
            <Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
        </FadeInView>
        </View>
    )
    }
  1. 响应者的生命周期。
    View.props.onStartShouldSetResponder: (evt) => true, - 在用户开始触摸的时候(手指刚刚接触屏幕的瞬间),是否愿意成为响应者?
    View.props.onMoveShouldSetResponder: (evt) => true, - 如果 View 不是响应者,那么在每一个触摸点开始移动(没有停下也没有离开屏幕)时再询问一次:是否愿意响应触摸交互呢?
    如果 View 返回 true,并开始尝试成为响应者,那么会触发下列事件之一:
    View.props.onResponderGrant: (evt) => {} - View 现在要开始响应触摸事件了。这也是需要做高亮的时候,使用户知道他到底点到了哪里。
    View.props.onResponderReject: (evt) => {} - 响应者现在“另有其人”而且暂时不会“放权”,请另作安排。
    如果 View 已经开始响应触摸事件了,那么下列这些处理函数会被一一调用:
    View.props.onResponderMove: (evt) => {} - 用户正在屏幕上移动手指时(没有停下也没有离开屏幕)。
    View.props.onResponderRelease: (evt) => {} - 触摸操作结束时触发,比如"touchUp"(手指抬起离开屏幕)。
    View.props.onResponderTerminationRequest: (evt) => true - 有其他组件请求接替响应者,当前的 View 是否“放权”?返回 true 的话则释放响应者权力。
    View.props.onResponderTerminate: (evt) => {} - 响应者权力已经交出。这可能是由于其他 View 通过onResponderTerminationRequest请求的,也可能是由操作系统强制夺权(比如 iOS 上的控制中心或是通知中心)。