小编Lou*_*345的帖子

我在制作动画时遇到了麻烦.我试图用两种不同的视图翻转卡片.当用户在两张不同的卡片之间滚动时,我也试图创建滚动效果.当代码以下面的方式组合时,它会创建一个我无法压缩的错误.我添加了一个图像来直观地表示我的问题.

我感谢任何帮助.

:

我的生命周期方法:

componentWillMount() {
    this.animatedValue = new Animated.Value(0);
    this.value = 0;
    this.animatedValue.addListener(({ value }) => {
      this.value = value;
      this.setState({ value });
    });
    this.frontInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: ['0deg', '180deg']
    });
    this.backInterpolate = this.animatedValue.interpolate({
      inputRange: [0, 180],
      outputRange: ['180deg', '360deg']
    });
  }
}

此动画用于生成翻转动画:

  flipCard() { 
    if (this.value >= 90) {
      this.setState({
        isWaiting: true
      });
      Animated.spring(this.animatedValue, {
        toValue: 0,
        friction: 8,
        tension: 10
      }).start(() => {
        this.setState({
          isWaiting: false
        });
      });
    } else {
      this.setState({
        isWaiting: …

我目前正在尽力实现一个条形图,允许用户在Y轴保持原位的同时在x轴上滚动.我使用React作为我的框架.

export default [
  { activity: 'Main Idea and Detail', value: 90, color: '#2A78E4' },
  { activity: 'Character and Plot', value: 80, color: '#2A78E4' },
  { activity: 'Elements of Poetry', value: 70, color: '#2A78E4' },
  { activity: 'Standard 8.10', value: 60, color: '#2A78E4' },
  { activity: '8.1.3', value: 50, color: '#2A78E4' },
  { activity: 'Skill 6', value: 40, color: '#2A78E4' },
  { activity: 'Skill 7', value: 30, color: '#2A78E4' },
  { activity: 'Skill 8', value: 21, color: '#2A78E4' },
  { …

在升级到最新版本的React-Native和Expo之前，此代码块已运行。正在使用的版本是 "expo": "^32.0.0"。

我以前能够以编程方式移动Animated.ScrollView的子级，但现在不再能够这样做。这是我正在测试的测试代码块。

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Animated,
  TouchableOpacity,
  SafeAreaView,
  ScrollView
} from 'react-native';

export default class App extends React.Component {
  constructor(props) {
    super(props);
  }
  handleMove = () => {
    this.scroller.getNode().scrollTo({
      x: 200,
      y: 0,
      animated: false
    });
  };
  render() {
    return (
      <SafeAreaView style={styles.container}>
        <Text>Open up App.js to start working on your app!</Text>
        <Animated.ScrollView
          horizontal
          ref={scroller => {
            this.scroller = scroller;
          }}
        >
          <View
            style={{
              height: 100,
              width: 100, …

我正在制作一个语言应用程序，它记录用户尝试学习的任何新词汇。如果用户可以通过语音将其单词添加到文本程序，而不必手动输入，那就太好了。我无法完成此任务。我知道有一个Apple的API，但没有android。无论如何，使用API​​可以做到这一点吗？例如，谷歌语音转文本API？但是我想我首先必须能够访问设备的麦克风。我是初学者，使用网络非常容易。React Native是否还太年轻，无法完成这项任务？

我正在尝试创建一个flexbox网格,当内容超出宽度时,它会换行.我正在使用flexbox wrap来实现这一目标.问题是内容未正确对齐,因为所有单词都不包含相同数量的字符.

我试图实现这个设计乍一看似乎很简单:

我最好的尝试是这样的:

我的代码是:

.bg {
  width: 990px;
  padding: 124px;
  height: auto;
  border-radius: 6px;
  background-color: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.5);
}

.flexgrid {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  word-wrap: break-word;
}

.wrap {
  display: flex;
  flex-direction: column;
  text-align: center;
  border-top: 1px solid black;
  padding: 33px;
  flex: 1;
  flex-basis: auto;
}

return (
      <div className={classes.container}>
        <div className={classes.bg}>
          <h1>My Flashcards</h1>
          <br />
          <div className={classes.flashcardcontainer}>
            <div className={classes.flexgrid}>
              {decks.map((deck, index) => {
                return ( …

我有一系列对象,这些对象具有深层嵌套的子对象,有时还有子对象.我试图递归地处理这个问题,但我陷入了困境.

该函数的目标是返回与id匹配的单个数据对象.

我的数据看起来像这样:

data: [
    {
      id: 'RAKUFNUBNY00UBZ40950',
      name: 'Grade 1 Cover',
      activityId: 'RAKUFNUBNY00UBZ40950',
      nodeType: 'activity',
      suppressed: false,
      hidden: false
    },
    {
      children: [
        {
          id: 'SLWDYEQHTZAFA3ALH195',
          name: 'Build Background Video',
          activityId: 'SLWDYEQHTZAFA3ALH195',
          nodeType: 'activity',
          suppressed: false,
          hidden: false,
          assetReference: {
            referenceId: 'UWFHA5A1E0EGKCM0W899',
            assetType: 'image'
          }
        },
        {
          children: [
            {
              id: 'HQUCD2SSRKMYC2PJM636',
              name: 'Eat or Be Eaten Splash Card',
              activityId: 'HQUCD2SSRKMYC2PJM636',
              nodeType: 'activity',
              suppressed: false,
              hidden: true
            },
            {
              children: [
                {
                  id: 'ZDTWEZFL13L8516VY480',
                  name: 'Interactive Work Text: Eat …