小编Val*_*Val的帖子

这个表达式对于javascript/react非常简单,用函数绑定this范围.

this.toggle = this.toggle.bind(this);

但是当引入flowtype时,会导致错误:

我该怎么做才能通过流量测试？

切换可以是任何功能,甚至是空的.

toggle() {
    /// do nothing
}

假设我有两个屏幕:

• 屏幕A.
• 屏幕B.

我最初登陆了Screen A.当我点击一个Button导航到Screen B.当我按下时Back Button,我再次导航到Screen A.

当我导航到Screen A上面的场景中时,我想调用一个动作创建者.

我只是想知道每次呈现屏幕时都会调用哪个生命周期事件.

是不是有一些事件componentWillAppear()？

注:我使用react-native与react-navigation用于导航.

背景

使用 React Native 我能够制作可折叠的卡片组件。在图标上单击卡片向上滑动隐藏其内容，或展开显示其内容。我认为设置默认值就像设置扩展为 false 或 true 一样简单，但我认为这里的问题是，当它被切换时，会触发一个动画，从而改变卡片的高度。

例子

class CardCollapsible extends Component{
  constructor(props){
    super(props);

    this.state = {
      title: props.title,
      expanded: true,
      animation: new Animated.Value(),
      iconExpand: "keyboard-arrow-down",
    };
  }

  _setMaxHeight(event){
      this.setState({
          maxHeight   : event.nativeEvent.layout.height
      });
  }

  _setMinHeight(event){
      this.setState({
          minHeight   : event.nativeEvent.layout.height
      });

      this.toggle = this.toggle.bind(this);
  }

  toggle(){
    let initialValue    = this.state.expanded? this.state.maxHeight + this.state.minHeight : this.state.minHeight,
        finalValue      = this.state.expanded? this.state.minHeight : this.state.maxHeight + this.state.minHeight;

    this.setState({
      expanded : !this.state.expanded
    });

    if (this.state.iconExpand === "keyboard-arrow-up") {
      this.setState({
        iconExpand : "keyboard-arrow-down"
      }) …

我使用上下文来.autobind-decorator bindthis

但我收到警告/错误 Experimental decorator usage (Decorators are an early stage proposal that may change)

我怎样才能解除这个警告？

试图复制以下设计但不能.将不胜感激任何帮助.

我尝试过的代码如下所示,但该行会覆盖文本.

<View>
  <View style={{ alignSelf:'center', borderBottomColor:'black', borderBottomWidth:1,height:'50%', width:'90%' }}/>
  <Text style={{ alignSelf:'center', paddingHorizontal:5 }}>Your class</Text>
</View>

我想要2个视图,它们像一个圆圈一样变换,同时没有旋转.第一个视图从顶部开始,第二个视图从底部开始.我已经问过如何用一个视图做到这一点.我不认为它运行两个视图. 之前的问题

//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Animated, Button, TouchableOpacity } from 'react-native';

// create a component
export default class App extends Component {
  constructor() {
      super()
      this.animated = new Animated.Value(0);
      this.animated2 = new Animated.Value(0);

      var range = 1, snapshot = 50, radius = 100;
      /// translateX
      var inputRange = []
      var outputRange = [] 
      var outputRange2 = []
      for (var i=0; i<=snapshot; ++i) {
          var value = i/snapshot;
          var move …

我正在尝试对ReactJS本机中的组件进行动画处理，以使其以圆形的方式围绕点连续旋转。基本上，我需要一个不断增加的计时器，可以用来将X，Y坐标设置为类似 {x: r * Math.sin(timer), y: r * Math.cos(timer)}

我发现该指南包含有关插值的一些非常有用的信息，但是我仍然没有成功：

http://browniefed.com/react-native-animation-book/INTERPOLATION.html

我如何像这样更新组件的位置？

额外的问题：如何使动画连续？

我在动态相同的位置添加了多个视图,还添加了pan Gesture的每个视图.所有视图都在同一位置,以便覆盖.我的问题是,当想要拖动最后一个视图时,它会拖动所有视图.如何拖动单个视图.

在这里你可以看到所有观点的GIF.View1,View 2和View 3.所有都是拖动.我想只查看3是可拖动的,其他拖动完成后拖3.

1.拖动3 - 首先拖动.

2.拖动2 - 拖动.

3.拖动1 - 第三次拖动.

代码:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PanResponder,
  Animated,
  Easing,
  Dimensions,
  Platform,
  TouchableOpacity,
} from 'react-native';

let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
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',
});

export …

我正在开发一个带有本机反应的应用程序。我有这个 UI 元素，它类似于 iOS 中的 Maps，你从底部和里面滑动一个面板，有一个可滚动的列表。

对于滑出式面板，我使用了一个名为rn-sliding-up-panel. 它有几个道具作为事件监听器。例如

<SlidingUpPanel
  allowDragging={/*Boolean*/}
  onDragStart={()=>{}   /*When it is about to be dragged*/}
  onDrag={()=>{} /*When it is being dragged*/}
  onDragEnd={()={} /*When the user is no longer touching the screen*/}
></SlidingUpPanel>

在它里面，我有一个<ScrollView>包含一个<List>from react-native-elements。据我所知，它只有一个发泄监听器，是：

<ScrollView onScroll={()=>{}}></ScrollView>

我的问题是在列表上滚动实际上会导致面板关闭（它通过向下滑动关闭）。我通过添加一个状态并在滚动上修改它找到了一种解决方法：

state = {
  dragPanel: true,
}
/*===========================================*/
<SlidingUpPanel allowDragging={this.state.dragPanel}>
     <ScrollView onScroll={()={ this.setState({dragPanel: false}) }}></ScrollView>
</SlidingUpPanel>

但是，我找不到恢复拖动的方法，并且它的启动效率不高。

TL; 博士

有没有一种有效的方法可以在 SlidingUpPanel 内实现 ScrollView 而没有每个重叠的事件？也许使用类似的东西function(e){e.preventDefault();}？

我在做一个测验。并且所有选项都将在 for 循环中呈现。

预期行为：

当我点击一个选项时，如果它是错误的答案，那么它应该将背景颜色更改为红色并且它应该抖动。

下面是我正在尝试的代码。

import React, { Component } from "react";
import {
  View,
  Text,
  TouchableWithoutFeedback,
  Animated,
  Easing
} from "react-native";

class MCQOptions extends Component {
  state = {
    optionSelectedStatus: 0 // 0: unselected, 1: correct, -1: wrong
  };
  constructor() {
    super();
    this.animatedValue = new Animated.Value(0);
    this.shakeAnimValue = new Animated.Value(0);
  }

  onOptionSelected(i) {

    // this.props.showNextQuestion();

    var answer = this.props.answer;
    if (answer == i) {
      this.setState({ optionSelectedStatus: 1 });
      this.showCorrectAnimation();
    } else {
      this.setState({ optionSelectedStatus: -1 });
      this.showErrorAnimation();
    } …

朋友，我将采用一个“父母视图”，而在视图内部则采用一个“ TouchableOpacity”。我将在主视图上添加panResponder，当触摸主视图时，它可以正常工作。但是TouchableOpacity无法正常工作，我想删除TouchableOpacity上的panResponder。这样TouchableOpacity就可以了。

代码：

    this._panResponder = PanResponder.create({
      // Ask to be the responder:
      onStartShouldSetPanResponder: (evt, gestureState) => true,
      onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
      onMoveShouldSetPanResponder: (evt, gestureState) => true,
      onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,


      onPanResponderGrant: (evt, gestureState) => {
        // The gesture has started. Show visual feedback so the user knows
        // what is happening!

        // gestureState.d{x,y} will be set to zero now

        // this.toggleModal()
      },
      onPanResponderMove: (evt, gestureState) => {
        // The most recent move distance is gestureState.move{X,Y}

        // The accumulated …

我创建ScrollView了三个视图.而且我想绑定里面的拖动视图ScrollView,其余的没有拖放视图应该保持在外面ScrollView.怎么可能呢？

请参阅GIF:我想在ScrollView中添加d​​raggableView.

代码:

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  PanResponder,
  Animated,
  Easing,
  Dimensions,
  Platform,
  TouchableOpacity,
  ScrollView,
} from 'react-native';
import Carousel from 'react-native-snap-carousel';


let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
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',
});

export default …