web-dev-qa-db-ja.com

Reactネイティブ-幅の縮小をアニメーション化

Reactネイティブアプリのヘッダーには、条件付きアイコンと Searchbar があります。

static navigationOptions = ({ navigation }) => {
const { params = {} } = navigation.state;
return {
  headerTitle: (
    <View
      style={{
        flex: 1,
        backgroundColor: Platform.OS === 'ios' ? '#e54b4d' : '',
        alignItems: 'center',
        flexDirection: 'row',
        paddingHorizontal: 10,
        height: StatusBar.currentHeight,
      }}>
      {params.isIconTriggered && <Icon name="chevron-left" size={28} />}
      <SearchBar
        round
        platform={'default'}
        placeholder="Search"
        containerStyle={{
          flex: 1,
          backgroundColor: 'transparent',
        }}
      />
    </View>
  ),
  headerStyle: {
    backgroundColor: '#e54b4d',
  },
};
};

通常、検索バーはヘッダーの全幅を取得します。条件isIconTriggeredがtrueの場合、アイコンは検索バーの前に表示され、検索バーの幅はアイコンの隣に表示されるように十分に縮小されます。

ただし、これが発生しても移行やアニメーションは発生せず、見栄えも良くありません。検索バーにアニメーションを追加して、条件がトリガーされてアイコンが表示されたときに幅が徐々にスムーズに縮小するようにしたいと思います。

それを達成することは可能ですか？これをどのように達成できますか？

javascriptreact-nativeanimationtransition
10
IamOptimus

これは、React Nativeの Animated APIを使用して実現できます。

アニメーションで要素のサイズを変更する概要については、この チュートリアル を確認してください。

1
Shoaib Khazer