react-native-board v0.8.2

react-native-board

of library

Installation

npm install react-native-board

Expo Go

expo intsall react-native-board
expo prebuild

export interface ImageFile {
  imageWidth: number;
  imageHeight: number;
  data: string;
}
export interface SealInfo {
  id: number;
  top: number;
  left: number;
  scale: number;
  text: string;
}

export interface BoardViewHandle {
  clear: () => void;
  undo: () => void;
  save: () => Promise<ImageFile>;
  createSeal: (text: string, index: number) => Promise<ImageFile>;
  saveWithSeal: (sealList: Array<SealInfo>) => Promise<ImageFile>;
}

export type BoardProps = {
  penSize: number;
  bgImage?: string;
  bgColor?: string;
  pathFactor?: number;
  brushMap?: number;
  factor?: number;
  stayCheckTime?: number;
  intervalTime?: number;
  //----
  style?: ViewStyle;
};

Usage

import * as React from 'react';

import { Button, Image, StyleSheet, View } from 'react-native';
import { BoardView } from 'react-native-board';

export default function App() {
  const [size] = React.useState([1000, 1000]);
  let boardViewRef = React.useRef<any>(!null);
  const [seal, setSeal] = React.useState('');
  React.useEffect(() => {}, []);
  return (
    <View style={styles.container}>
      <View style={styles.btnBox}>
        <Button
          title="clear"
          onPress={() => {
            if (boardViewRef.current !== null) {
              boardViewRef.current.clear();
            }
          }}
        />
        <Button
          title="undo"
          onPress={() => {
            if (boardViewRef.current !== null) {
              boardViewRef.current.undo();
            }
          }}
        />
        <Button
          title="save"
          onPress={() => {
            if (boardViewRef.current !== null) {
              boardViewRef.current
                .save()
                .then((data: any) => setSeal(data.data));
            }
          }}
        />
        <Button
          title="saveWithSeal"
          onPress={() => {
            if (boardViewRef.current !== null) {
              boardViewRef.current
                .saveWithSeal([
                  { id: 1, top: 0, left: 0, scale: 1, text: '招财进宝' },
                ])
                .then((data: any) => setSeal(data.data));
            }
          }}
        />
        <Button
          title="createSeal"
          onPress={() => {
            if (boardViewRef.current !== null) {
              boardViewRef.current
                .createSeal('招财进宝', 13)
                .then((data: any) => setSeal(data.data));
            }
          }}
        />
      </View>
      <Image
        source={{ uri: 'data:image/png;base64,' + seal }}
        style={{ width: 200, height: 200 }}
        resizeMode="contain"
      />
      <BoardView
        //@ts-ignore
        ref={boardViewRef}
        // bgColor="#32a852"
        // bgImage="b4"
        penSize={1}
        style={{
          width: size[0],
          height: size[1],
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    width: 1080,
  },
  box: {
    width: 1080,
    height: 1920,
  },
  btnBox: {
    width: 1000,
    flexDirection: 'row',
  },
});



## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)