web-dev-qa-db-ja.com

Animated.ViewとReact Nativeでテキストプレビューを拡大/折りたたむ方法

デフォルトで2行になりたいテキストコンポーネントを作成しています。ユーザーがタップすると、完全な長さまで展開され、ユーザーがもう一度タップした場合は2行に折り返します。

これまでのところ私は私の返品機能でこのようなものを持っています:

<TouchableWithoutFeedback
    onPress={() => {
      toggleExpansion();
    }}
>
  <Animated.View style={[{ height: animationHeight }]}>
    <Text
      style={styles.textStyle}
      onLayout={event => setHeight(event.nativeEvent.layout.height)}
      numberOfLines={numberOfLines}
    >
      {longText}
    </Text>
  </Animated.View>
</TouchableWithoutFeedback>
 _

私の状態変数とToggleExpansion関数は次のようになります。

const [expanded, setExpanded] = useState(false);
const [height, setHeight] = useState(0);
const [numberOfLines, setNumberOfLines] = useState();

const toggleExpansion = () => {
  setExpanded(!expanded);
  if (expanded) {
    setNumberOfLines(undefined);
  } else {
    setNumberOfLines(2);
  }
};
 _

これまでのところこれは展開して折りたたんでいますが、アニメートをアニメートするようにAnimated.Timing関数を設定する方法はわかりません。私はこのようなものを試しました:

const animationHeight = useRef(new Animated.Value(0)).current;

useEffect(() => {
  Animated.timing(animationHeight, {
    duration: 1000,
    toValue: height,
    easing: Easing.linear
  }).start();
}, [height]);
 _

しかし、それはかなり働きませんでした。それはまったくテキストを表示しません、そして私が新しいAnimated.valueを2回線の高さよりも大きな数に初期化しようとしているとき(50のように)、私がどのくらい拡大して崩壊するかに関係なく、常に高さは常に切り捨てられます。テキストの拡大と崩壊をアニメートするための最良の方法は何ですか?

3
Kevin

YOELの答えに少し改善しました。ビューをアニメートしたり、テキストを追加したり、アニメーションの終了時にコールバックを追加することができます。テキストを最大2行数にクランプします。

enter image description here

コード付きのエキスプスナック: https://snack.expo.io/@lucaskuhn/collapsible - card-

*この問題の修復方法を誰かが知っていれば、崩壊を締めくくっている場合は遅れているようです。

0
Lucas Kuhn