xxxxxxxxxx
import React from 'react';
import { StatusBar, StyleSheet, View } from 'react-native';
import { SliderBox } from 'react-native-image-slider-box';
const App = () => {
const [images, setImages] = React.useState([
"https://source.unsplash.com/1024x768/?nature",
"https://source.unsplash.com/1024x768/?water",
"https://source.unsplash.com/1024x768/?tree",
]);
return (
<View style={styles.container}>
<SliderBox
images={images}
sliderBoxHeight={400}
dotColor="#FFEE58"
inactiveDotColor="#90A4AE"
onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
paginationBoxVerticalPadding={20}
autoplay
circleLoop
/>
<StatusBar />
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
paddingTop: 10,
flex: 1,
},
});
export default App;
xxxxxxxxxx
import React from 'react';
import { View, Image } from 'react-native';
import Carousel from 'react-native-snap-carousel';
const ImageSlider = () => {
const images = [
{ id: 1, imageUrl: 'https://example.com/image1.jpg' },
{ id: 2, imageUrl: 'https://example.com/image2.jpg' },
{ id: 3, imageUrl: 'https://example.com/image3.jpg' },
];
const renderImage = ({ item }) => {
return (
<View>
<Image source={{ uri: item.imageUrl }} style={{ width: 200, height: 200 }} />
</View>
);
};
return (
<View>
<Carousel
data={images}
renderItem={renderImage}
sliderWidth={300}
itemWidth={200}
/>
</View>
);
};
export default ImageSlider;
xxxxxxxxxx
import React from 'react';
import Icon from 'react-native-vector-icons/Ionicons';
import { StyleSheet, View } from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
const styles = StyleSheet.create({
buttonCircle: {
width: 40,
height: 40,
backgroundColor: 'rgba(0, 0, 0, .2)',
borderRadius: 20,
justifyContent: 'center',
alignItems: 'center',
},
//[...]
});
// slides = [...]
export default class App extends React.Component {
_renderItem = ({ item }) => {
return (
<View style={styles.slide}>
<Text style={styles.title}>{item.title}</Text>
<Image source={item.image} />
<Text style={styles.text}>{item.text}</Text>
</View>
);
}
_renderNextButton = () => {
return (
<View style={styles.buttonCircle}>
<Ion
name="md-arrow-round-forward"
color="rgba(255, 255, 255, .9)"
size={24}
/>
</View>
);
};
_renderDoneButton = () => {
return (
<View style={styles.buttonCircle}>
<Ion
name="md-checkmark"
color="rgba(255, 255, 255, .9)"
size={24}
/>
</View>
);
};
render() {
return (
<AppIntroSlider
data={slides}
renderDoneButton={this._renderDoneButton}
renderNextButton={this._renderNextButton}
/>
);
}
}
xxxxxxxxxx
import React, { useState } from 'react';
import { View, Text, StyleSheet, Slider } from 'react-native';
const SliderComponent = () => {
const [sliderValue, setSliderValue] = useState(0);
const handleSliderChange = (value) => {
setSliderValue(value);
};
return (
<View style={styles.container}>
<Text style={styles.text}>Slider Value: {sliderValue}</Text>
<Slider
style={styles.slider}
minimumValue={0}
maximumValue={100}
step={1}
value={sliderValue}
onValueChange={handleSliderChange}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
text: {
fontSize: 24,
marginBottom: 20,
},
slider: {
width: '80%',
},
});
export default SliderComponent;