Acceder al rollo de cámara usando React Native

Para acceder a las fotos, necesitamos un evento de clic. Añadamos el accesorio onPress al botón y un método de manejo llamado getPicturesFromGallery().

123456789101112//...render(){retorno(<View style={styles.container};<TouchableHighlight onPress={()={Esto. getPicturesFromGallery()};};Fuente de la imagen={require($0027../activos/addPicture.png$0027)}/{N-TouchableHighlight()};}

javascript

getPicturesFromGallery()

12345678//...getPicturesFromGallery(){CameraRoll.getPhotos({ first:5000}).then(res=>{console.log(res, "images data")}}//...

javascript

El objeto dentro de getPhotos({ primero: 5000 }) se usa para especificar el número de imágenes que queremos obtener de la galería. Cuando ejecutemos la aplicación, nos encontraremos con un error:

«No se puede leer la propiedad $0027getPhotos$0027 de indefinido»

El error anterior ocurre porque la librería de rollos de cámara no ha sido añadida o enlazada a nuestras fases de construcción en Xcode. Para corregir el error, nosotros:

1. Ir a nuestro directorio de proyectos
2. Abrir el directorio IOS
3. Navegue hasta el archivo que tiene .xcodeproj como extensión. En nuestro caso, debería ser camRollExample.xcodeproj
4. Abre este archivo en Xcode.

A continuación, debemos arrastrar RCTCamRoll.xcodeproj en nuestro directorio de proyecto a Xcode.

Arrastremos el archivo RCTCamRoll.xcodeproj al archivo de la biblioteca en Xcode. Luego podemos hacer clic en Fases de construcción ubicado en la esquina superior derecha en Xcode. Hagamos clic en el desplegable junto a Enlazar binario con bibliotecas , luego el signo + para añadir libRCTCamRoll.a.

Podemos entonces ejecutar la construcción y reiniciar nuestro emulador o dispositivo. Para comprobar las imágenes, necesitamos tener la uri en el objeto de la imagen. Aquí hay una versión actualizada de CameraRoll.js.

CameraRoll.js

1234567891011121314151617181920212223242526272829303132333435363738///...importViewPicturesfrom$0027./ViewPictures$0027;classCamScreenextendsComponent{ state ={ showPhotoGallery:false, pictureArray:[]}getPicturesFromGallery(){CameraRoll. getPhotos({ first:5000}).then(res={N- deje pictureArray = res.edges;this.setState({ showPhotoGallery:true, pictureArray: pictureArray })})}render(){if(this. state.showPhotoGallery){retorno(<ViewPictures pictureArray={this.state.pictureArray}/>)}retorno(<View style={styles.container};<TouchableHighlight onPress={()={esto. getPicturesFromGallery()};};Image source={require($0027../assets/addPicture.png$0027)}//;/TouchableHighlight()};}//...

javascript

En los fragmentos de código anteriores, acabamos de importar ViewPictures.js. Esto es para mostrar las imágenes dentro de una vista de lista.

ViewPictures.js

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576importReact,{Componente}de$0027reaccionar$0027; importar{Imagen,Vista,ListaVista,Hoja de Estilo,Texto,TáctilDestacador}de$0027reaccionar-nativo$0027;importarImagenSeleccionada de$0027. /SelectedPicture$0027;classViewPicturesextendsComponent{ state ={ ds:newListView. DataSource({rowHasChanged:(r1, r2)= > r1 !== r2 }), showSelectedPicture:false, uri:$0027$0027}renderRow(rowData){const{ uri }= rowData.node.image;return(<TouchableHighlight onPress={()=>this. setState({ showSelectedPicture:true, uri: uri })};};Fuente de la imagen={{{{ uri: rowData.node.image.uri}}} style={styles.image}/{ </TouchableHighlight>)}render(){const{ showSelectedPicture, uri }=esto. state;if(showSelectedPicture){retorno(<SelectedPicture uri={uri}/&&;)}retorno(<View style={{{{ flex:1}};<View style={{{alignItems:$0027center$0027, marginTop:15}};<Text style={{{{ fontSize:30, fontWeight:$0027700$0027}};PickAPicture!  props.pictureArray)} renderRow={(rowData)={esta.renderRow(rowData)} enableEmptySections={true}/{N;};}const styles =StyleSheet. create({ list:{ flexDirection:$0027row$0027, flexWrap:$0027wrap$0027}, image:{ width:120, height:130, marginLeft:15, marginTop:15, borderRadius:6, borderWidth:2, borderColor:$0027#efefef$0027}})exportdefaultViewPictures;

javascript

Cuando hacemos clic o seleccionamos una imagen de la lista, la imagen seleccionada se mostrará en el componente SelectedPicture.js.

SelectedPicture.js

123456789101112131415161718192021222324252627282930313233importarReaccionde$0027reaccion$0027;import{Imagen,Vista,Hoja de Estilo,Texto,Toque-Highlight}de$0027reaccionnativa$0027;constSelectedPicture=(props)={const{ uri }= props;return(<View style={styles. container};<Image source={{{{uri: uri}}} style={styles.image}/{N;};};const styles =StyleSheet.create({ container:{ flex:1, justifyContent:$0027center$0027, alignItems:$0027center$0027}, image:{ height:300, width:200}});exportdefaultSelectedPicture;

javascript