react-native：文本组件的动画高度？

Question

因此，我有一个Text组件，其numberOfLines道具为5。只要该组件的行数超过5，它就会以一个椭圆结尾。我有什么办法使这个Text组件的高度动画化，以显示自动切掉的其余线条？

例如。

<Text>
    asldkfjaslfkdsajflkfjsadfsadifjsflsakfjfalskfjfalskfjasflkasdjfas
    lifsadjfaisfjaflkafjaslfkasdjflaskfjasklsdjfasfijeifjsadlkfasdjf;a
    sdkfjadsfl;kasjfasl;fadsjflaskfjas;lfasjfasdl;fjksafl;kasjfl;a
    sfjasl;fkadjsf;laskjfaslfkjsafl;sadkjfl;asdkfjasdl;fjasl;fjasl
    ;fkjasdflksadjfalsdkfjas;lfakfjaslfkjadslfjasdlfjasl;fkjasdlf
    ;kajsdlf;kajsdflaks;jfasdlk;fjals;kfj
</Text>

会给我

但是我希望单击一个按钮，然后使其动画高度并显示其余文本。

Answer 1

要显示其余行，可以切换行数属性值并平滑设置高度动画，可以对组件应用css过渡。

<Text class="text-animate" numberOfLines={`${!this.state.buttonClicked ? '5' : ''}`}>
    asldkfjaslfkdsajflkfjsadfsadifjsflsakfjfalskfjfalskfjasflkasdjfas
    lifsadjfaisfjaflkafjaslfkasdjflaskfjasklsdjfasfijeifjsadlkfasdjf;a
    sdkfjadsfl;kasjfasl;fadsjflaskfjas;lfasjfasdl;fjksafl;kasjfl;a
    sfjasl;fkadjsf;laskjfaslfkjsafl;sadkjfl;asdkfjasdl;fjasl;fjasl
    ;fkjasdflksadjfalsdkfjas;lfakfjaslfkjadslfjasdlfjasl;fkjasdlf
    ;kajsdlf;kajsdflaks;jfasdlk;fjals;kfj
</Text>

和

.text-animate {
    transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
}

请注意，这取决于react-native如何在组件中应用给定类，并且受<Text/> API文档的约束。