小编Gil*_*iwu的帖子

我在具有平移的动画视图中有一个ScrollView。

<Animated.View {...this.panResponder.panHandlers}>
    <ScrollView>
    ...
    </ScrollView>
<Animated.View>

这是我的屏幕的示例视图：

用户应该能够向上滑动，而可拖动区域应该向上捕捉，如下所示：

现在我的问题是Scrollview。我希望用户能够在其中滚动内容。

用户查看完内部内容并向上滚动（通过执行向下滑动动作）并尝试进一步滑动之后，可拖动区域应向下移动到其原始位置。

我尝试了各种方法，主要侧重于禁用和启用ScrollView的滚动，以防止其干扰平移。

我当前的解决方案并不理想。

我的主要问题是这两种方法：

onStartShouldSetPanResponder 
onStartShouldSetPanResponderCapture

不知道我的假设是否正确，但是这些方法决定了View是否应捕获触摸事件。我要么允许平移，要么让ScrollView捕获事件。

我的问题是我需要以某种方式知道用户打算在其他平移处理程序加入之前做什么。但是我无法知道，直到用户向下或向上移动为止。要知道方向，我需要事件传递给onPanResponderMove处理程序。

因此，从本质上讲，我什至在不知道用户滑动方向之前，需要决定是否应该拖动视图。目前这是不可能的。

希望我在这里想念一些简单的东西。

编辑：找到一个类似的问题（无答案）： 向上拖动ScrollView，然后在React Native中继续滚动

我有一个关于将函数作为道具传递的问题.在最后的tic-tac-toe教程(https://facebook.github.io/react/tutorial/tutorial.html)中,Game组件传递onClick处理程序:

<div className="game-board">
  <Board
    squares = { current.squares }
    onClick = {(i) => this.handleClick(i) }
  />
</div>

首先,为什么我们不能这样传递函数:

onClick = { this.handleClick(i) }

我知道传递"我"很重要,但教程中间的某些内容让我很困惑:

return <Square value={this.state.squares[i]} onClick={() => this.handleClick(i)} />;

这里我们不在箭头函数的括号中传递"i".我不想写太多,以使问题不那么冗长.我相信有些人已经完成了本教程,并能够回答我的问题.

更新:Tnx大家的简短和有用的答案.作为后续,在官方文档中,我们被告知绑定一个函数,如果它要用作组件的事件处理程序.为什么这是必要的,为什么它从来没有用过教程？

我使用react-native的LayoutAnimation来实现自定义开关组件.

我正在使用LayoutAnimation动画圆圈的运动,如下所示:

componentWillUpdate() {
  let switchAnimation = {
    duration: 250,
     update: {
       type: LayoutAnimation.Types.linear,
       property: LayoutAnimation.Properties.opacity,
     },
  };
  LayoutAnimation.configureNext(switchAnimation);
}

交换机是它自己的组件.它使用css(justifyContent flex-start或flex-end)接收道具将圆圈设置在左侧或右侧

在我看来问题是当交换机改变值时其他组件也发生了变化:即当交换机被命中时:

1)切换更改

2)图标发生变化

3)一些文字变化

所有上述动画.我想减少动画只影响开关

更新:我尝试使用动画API,但它似乎不支持动画flex属性.是否真的没有人广泛使用动画API？

我想知道推荐的方式(如果有的话)在处理android平台时处理react-native中的后退按钮.

我知道我可以在每个屏幕上注册监听器,但由于导航的工作方式,在导航时没有明确的绑定或解除绑定事件监听器的流程.

到目前为止,我有两个想法.

1)我可以注册一个单一的监听器,并让处理程序根据我的redux存储做出决定.这意味着如果我有一个屏幕,我有一个弹出窗口,我想用后退按钮关闭,我必须将它暴露给商店.基本上我的应用程序中任何想要受后退按钮影响的东西都必须连接到商店.乱

2)我可以在每个屏幕上注册一个监听器.根据我之前所说的,没有可靠的生命周期钩子来处理这个,所以它必须是我的手动,即我应该总是知道什么动作将导航到新的屏幕并在导航之前取消绑定特定屏幕上的监听器.

这解决了问题的一半.当导航回屏幕时,它应该重新绑定它的监听器.除了搞乱componentWillRecieveProps和其他人之外,不知道如何做到这一点.看起来仍然很混乱.

我想使用Go模板和VueJS进行数据绑定.以前有没有人融合？

我希望主要使用VueJS进行Ajax调用,因为手动(或使用jQuery)总是让我的代码变得混乱.

更具体地说,如果我有一个简单的<p>标签,其值是从Go模板生成的,如下所示:

{{.Color}}

现在我想像这样绑定到值
:

{{someVariable}} 

两者都是相同的标签.

我使用 Axum 框架构建一个简单的休息服务器。我想要一种“应用程序状态”，其中包含一些可重用的组件，供我的一些处理程序重用/使用。

#![allow(incomplete_features)]
#![feature(async_fn_in_trait)]

use axum::{routing::post, Router};
use std::{net::SocketAddr, sync::Arc};

mod modules;
use modules::auth::handlers::login;

pub struct AppState<'a> {
    user_credentials_repository: UserCredentialsRepository<'a>,
}

pub struct UserCredentialsRepository<'a> {
    shared_name: &'a mut String,
}

impl<'a> UserCredentialsRepository<'a> {
    pub fn new(shared_name: &'a mut String) -> UserCredentialsRepository<'a> {
        UserCredentialsRepository { shared_name }
    }
}

#[tokio::main]
async fn main() {
    let mut name = String::from("Tom");
    let mut user_credentials_repository = UserCredentialsRepository::new(&mut name);

    let shared_state = Arc::new(AppState {
        user_credentials_repository,
    });

    let app = Router::new()
        .route("/login", post(login))
        .with_state(shared_state);

    let …

我使用Aurelia的fetch客户端与我的服务器进行通信.在使用fetch客户端的每个viewModel中,我必须将客户端配置为使用拦截器发送自定义头(令牌).

有没有办法在某个地方配置一次获取客户端,而不是在每个viewModel中重写拦截器代码.

我使用VueJs的动态组件选项交换了一些组件。我在动态组件上设置了过渡。我的问题如下：-当前，如果更改当前视图（或组件），则过渡效果开始（离开过渡）-过渡效果一开始，下一个视图/组件就会开始其自己的过渡。本质上，两个过渡同时发生。我想要的是第一个组件的（离开）过渡在新组件的（输入）过渡开始之前完成。

<template>
    <div id="app">
        <div>Current page: {{currentView}}</div>
        <img src="./assets/logo.png">
        <transition name="fade">
            <component @stateCPchanged="changeView" v-bind:is="currentView"></component>
        </transition>
    </div>
</template>

<script>
    import numberPage from './components/NumberPage.vue'
    import otpPage from './components/OtpPage.vue'
    import redirectPage from './components/RedirectPage.vue'
    import state from './state.js'
    export default {
        data () {
            return {
                currentView: state.currentPage
            }
        },
        components: {
            numberPage: numberPage,
            otpPage: otpPage,
            redirectPage: redirectPage
        }, 
        methods: {
            changeView() {
                this.currentView = state.currentPage
            }
        }
    }
</script>

<style>
    .fade-enter-active {
        transition: all 0.4s
    }
    .fade-enter {
        opacity: 0;
        margin-left: 90px;
    } …

我有两个视图堆叠在一起。

模拟器中的屏幕截图：

我在手机上看到的内容：

从屏幕上可以看到，仿真器版本很好，但是我手机的两个视图之间有一条白线。代码如下：

import React, { Component } from 'react';

import {
  Text,
  View,
  StyleSheet,
} from 'react-native';

class FlightSearch extends Component {

  render() {

    return (
      <View style={styles.pageRoot}>

        <View style={styles.navSection}></View>

        <View style={styles.searchSection}>

          <View style={styles.locationSection}></View>

          <View style={styles.searchParametersSection}></View>

        </View>

      </View>
    );
  }

}


const styles = StyleSheet.create({
  pageRoot: {
    flex: 1,
    flexDirection: 'column',
  },
  navSection: {
    backgroundColor: '#368ec7',
    flex: 25,
    alignSelf: 'stretch'
  },
  searchSection: {
    flex: 75,
    alignSelf: 'stretch',
  },
  locationSection: {
    flex: 30,
    backgroundColor: '#276fa3', …

从文档中这样的事情应该是可能的：

const wrapper = mount(<Foo name="foo" />);
expect(wrapper.find('.foo')).to.have.length(1);

但是在我的情况下，这会引发错误，说无法读取未定义的属性。

使用这个虽然有效：

expect(wrapper.find('.foo').length).toBe(1);