反应本机图像转换器
React Native Image Changer
我有六张图片,我想用两个按钮、后退按钮和下一张更改这张图片 button.If 我使用两张图片没有问题,但我使用六张图片有问题。
ss2
ss3
所以你必须将数据保存在一个数组中,并在按钮点击到下一个时对索引进行 setState。
假设当前索引为 0,当您单击下一步时,将索引递增到 1 并执行 setState。
例如,
import React, { Component } from 'react'
// import PropTypes from 'prop-types';
import { View, TouchableOpacity, Image, Text } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
images: [],
selectedIndex: 0
}
}
_ToggleNext = () => {
if(this.state.selectedIndex == this.state.images.length - 1)
return;
this.setState(prevState => ({
selectedIndex: prevState.selectedIndex + 1
}))
}
_TogglePrev = () => {
if(this.state.selectedIndex == 0)
return;
this.setState(prevState => ({
selectedIndex: prevState.selectedIndex - 1
}))
}
render() {
const {selectedIndex, images} = this.state;
return (
<View>
<Image
source={{ uri: images[selectedIndex]}}
style={styles.image}
/>
<TouchableOpacity onPress={this._ToggleNext}>
<Text>Next</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._TogglePrev}>
<Text>Pr</Text>
</TouchableOpacity>
</View>
)
}
}
编辑:Link - https://snack.expo.io/rysnt5iUV
我有六张图片,我想用两个按钮、后退按钮和下一张更改这张图片 button.If 我使用两张图片没有问题,但我使用六张图片有问题。
所以你必须将数据保存在一个数组中,并在按钮点击到下一个时对索引进行 setState。 假设当前索引为 0,当您单击下一步时,将索引递增到 1 并执行 setState。 例如,
import React, { Component } from 'react'
// import PropTypes from 'prop-types';
import { View, TouchableOpacity, Image, Text } from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
images: [],
selectedIndex: 0
}
}
_ToggleNext = () => {
if(this.state.selectedIndex == this.state.images.length - 1)
return;
this.setState(prevState => ({
selectedIndex: prevState.selectedIndex + 1
}))
}
_TogglePrev = () => {
if(this.state.selectedIndex == 0)
return;
this.setState(prevState => ({
selectedIndex: prevState.selectedIndex - 1
}))
}
render() {
const {selectedIndex, images} = this.state;
return (
<View>
<Image
source={{ uri: images[selectedIndex]}}
style={styles.image}
/>
<TouchableOpacity onPress={this._ToggleNext}>
<Text>Next</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._TogglePrev}>
<Text>Pr</Text>
</TouchableOpacity>
</View>
)
}
}
编辑:Link - https://snack.expo.io/rysnt5iUV