React-native-transfrom-view NPM

react-native-transfrom-view

自由的縮放/移動你的View

安裝

npm install react-native-transfrom-view
# or
yarn add react-native-transfrom-view

組件-TransfromView

基礎元件，縮放/移動

使用

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TransfromView } from 'react-native-transfrom-view';

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TransformView wrapperStyle={styles.wrapper}>
          <Text style={styles.text} >Hello World</Text>
        </TransformView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  wrapper: {
    flex: 1,
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;

TransfromView Props

View.props...
containerStyle
wrapperStyle
scopeStyle
minScale
maxScale
useNativeDriver

containerStyle

最外層的樣式
View style

wrapperStyle

嚮應動畫的樣式
Animated.View style

scopeStyle

手勢作用域樣式
View style

minScale

最小縮放
number

maxScale

最大縮放
number

useNativeDriver

是否使用原生動畫
boolean

組件-TransfromImage

顯示圖片，可縮放/移動，當傳入圖片參數為uri時，會顯示載入指示器

使用

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { TransfromImage } from 'react-native-transfrom-view';

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TransfromImage source={{ uri: 'https://via.placeholder.com/350x150' }} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default App;