
React Native video
Logo

URL API
http://tutofox.com/foodapp/api.json
Create project
sudo react-native init appfood
create file local.properties
Antes de compilar en android debes crear un archivo local.properties en la carpeta de android y pegarlo el codigo para localizarlo el SDK
Before compiling on android you must create a local.properties file in the android folder and paste the code to locate the SDK
sdk.dir = /home/artyom/Android/Sdk/
ANDROID_HOME = /home/artyom/Android/Sdk/
windows
sdk.dir=C\:\\Users\\Artyom\\AppData\\Local\\Android\\Sdk
Run project
// android
react-native run-android
// ios
react-native run-ios
Run npm
sudo react-native start
Crear una carpeta llamado src y crear un archivo index.js
Create a folder called src and create an index.js file
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class Examle extends Component {
render() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<Text>APp Delivery </Text>
</View>
);
}
}
react-native-swiper
https://github.com/leecade/react-native-swiper
Is a Swiper component for React Native.
npm i --save [email protected]
import
import React, { Component } from 'react';
import { Text,
FlatList,
Image,
StyleSheet,
Dimensions,
View,
ScrollView,
TextInput
} from 'react-native';
var {height, width } = Dimensions.get('window');
import Swiper from 'react-native-swiper'
state
constructor(props)
{
super(props);
this.state = {
dataBanner:[]
}
}
componentDidMount
componentDidMount(){
const url = "http://tutofox.com/foodapp/api.json"
return fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataBanner: responseJson.banner,
});
})
.catch((error) =>{
console.error(error);
});
}
render
render() {
return (
<ScrollView>
<View style={{ flex: 1,backgroundColor:"#f2f2f2" }}>
<View style={{width: width, alignItems:'center'}} >
<Image style={{height:60,width:width/2,margin:10 }} resizeMode="contain" source={require("./image/foodapp.png")} />
<Swiper style={{height:width/2}} showsButtons={false} autoplay={true} autoplayTimeout={2}>
{
this.state.dataBanner.map((itembann)=>{
return(
<Image style={styles.imageBanner} resizeMode="contain" source={{uri:itembann}}/>
)
})
}
</Swiper>
<View style={{height:20}} />
</View>
</View>
</ScrollView>
);
}
styles
const styles = StyleSheet.create({
imageBanner: {
height:width/2,
width:width-40,
borderRadius:10,
marginHorizontal:20
},
});

Source font
import React, { Component } from 'react';
import { Text,
FlatList,
Image,
StyleSheet,
Dimensions,
View,
ScrollView,
TextInput
} from 'react-native';
var {height, width } = Dimensions.get('window');
import Swiper from 'react-native-swiper'
export default class App extends Component {
constructor(props)
{
super(props);
this.state = {
dataBanner:[]
}
}
componentDidMount(){
const url = "http://tutofox.com/foodapp/api.json"
return fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataBanner: responseJson.banner,
});
})
.catch((error) =>{
console.error(error);
});
}
render() {
return (
<ScrollView>
<View style={{ flex: 1,backgroundColor:"#f2f2f2" }}>
<View style={{width: width, alignItems:'center'}} >
<Image style={{height:60,width:width/2,margin:10 }} resizeMode="contain" source={require("./image/foodapp.png")} />
<Swiper style={{height:width/2}} showsButtons={false} autoplay={true} autoplayTimeout={2}>
{
this.state.dataBanner.map((itembann)=>{
return(
<Image style={styles.imageBanner} resizeMode="contain" source={{uri:itembann}}/>
)
})
}
</Swiper>
<View style={{height:20}} />
</View>
</View>
</ScrollView>
);
}
}
const styles = StyleSheet.create({
imageBanner: {
height:width/2,
width:width-40,
borderRadius:10,
marginHorizontal:20
},
});
Hello, how do I change the images on the react native restaurant app
cuando trato de hacerle el cache me sigue saliendo el mismo error , para importalar la libreria native-swiper
cuando cambio las imágenes con el deslizador, el puntero que indica en qué imagen está no se mueve