Hướng dẫn sử dụng thư viện tương tác Camera chọn ảnh và chụp ảnh

 

Thư viện: https://github.com/react-native-image-picker/react-native-image-picker

 

Bước 1: Cài đặt thư viện vào project

npm i react-native-image-picker --save

Bước 2: Import thư viện và code tài nguyên tham khảo

Import thư viện:

 

import * as ImagePicker from 'react-native-image-picker';

Tham khảo tại https://github.com/react-native-image-picker/react-native-image-picker/blob/main/example/src/App.tsx

Bước 3: Vào component chính khai báo state để chứa ảnh chọn

const [anhChon, setAnhChon] = useState(null);

Bước 4: Viết hàm xử lý sự kiện bấm nút để mở camera

 

const bamNut = useCallback(()=>{
       // định nghĩa option lựa chọn hình thức sử dụng camera
     // chụp ảnh:
     let  options =  {
         saveToPhotos: true,
         mediaType: 'photo',
         includeBase64: false,
         includeExtra:true
       }
       // bật camera chụp ảnh thì dùng lệnh
       ImagePicker.launchCamera(options, setAnhChon);
 },[]);

Bước 5: Viết nút bấm

 

     <Button title='Chụp ảnh' onPress={bamNut} />

Bước 6: Ghi log thay đổi kết quả

 

useEffect(()=>{
     // nếu ảnh thay đổi thì ghi log
     console.log(anhChon);
    
 },[anhChon])

Bước 7: Viết code hiển thị ảnh trong phần return của component

 

{
       (typeof(anhChon.assets)!='undefined')?
         anhChon?.assets.map( ( objImage, index)=>{
           
             return (
               <View key={index}>
                   <Image key={index}
                     source = {{uri: objImage.uri}}
                     style={{width: 100, height: 100}} />
               </View>
             )
         })
       :''
     }

 

Chạy ứng dụng và thử nghiệm chụp ảnh

Bước 8: Cải tiến thêm hàm chọn ảnh từ thư viện:

Viết hàm chọn ảnh

 

  const chonAnh = useCallback(()=>{
      // định nghĩa option chọn ảnh
      
      let  options =  {
          selectionLimit: 0,
          mediaType: 'photo',
          includeBase64: false,
          includeExtra:true
      }
      // mở thư viện ảnh để chọn
      ImagePicker.launchImageLibrary(options, setAnhChon);
  },[]);

Thêm nút bấm vào màn hình

 

<View style={{margin:10}}></View>
<Button title='Chọn ảnh trong máy' onPress={chonAnh} />
<View style={{margin:10}}></View>

Chạy lại ứng dụng và thử nghiệm kết quả.