如何在 react native 中更改数组元素的样式

Question

我留下了一小段示例代码，因为我有我的代码，实际上我的代码我在 FlatList 中显示它......但在这里我给他留下了类似的东西 .map 实际上是一回事，它们是动态视图，我希望在单击按钮后，视图会更改样式(位置楞峰、宽度、后方颜色等(

import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
export default function App() {
return (
<View style={styles.container}>
{shopping.map((data, idx) => {
return (
<View
style={{
width: '100%',
height: 70,
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
alignItems: 'center',
}}>
<Text>Tex: {data}</Text>
//I press this buttom, i want change this View Styles!!!, only this view
<TouchableOpacity onPress={() => {}}>
<View
style={{
width: '100%',
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
borderRadius: 15,
}}>
<Text style={{ width: '100%' }}>Change</Text>
</View>
</TouchableOpacity>
</View>
);
})}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
});

Answer 1

您可以有一个状态变量，然后设置它以更改样式。

<TouchableOpacity onPress={() => this.setState({changeStyleIndex:index})}>
<View
style={this.state.changeStyleIndex != index{
width: '100%',
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
borderRadius: 15,
}:{change style goes here}}>
<Text style={{ width: '100%' }}>Change</Text>
</View>
</TouchableOpacity>

Answer 2

import React from 'react'
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';
let shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
export default class App extends React.Component {
constructor(props) {
super(props)
this.state = {
BackColor = '#f7f7f7',
StateWidth: '100%'
}
}
HandleChange = () => {
this.setState({
BackColor: 'red',
StateWidth: '50%'
})
}
render() {
const { BackColor, StateWidth } = this.state
return (
<View style={styles.container}>
{shopping.map((data, idx) => {
return (
<View
style={{
width: { StateWidth },
height: 70,
backgroundColor: { BackColor },
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
alignItems: 'center',
}}>
<Text>Tex: {data}</Text>
//I press this buttom, i want change this View Styles!!!, only this view
<TouchableOpacity onPress={() => { this.HandleChange }}>
<View
style={{
width: '100%',
height: 30,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f7f7f7',
marginTop: 5,
marginBottom: 5,
borderColor: '#dfdfdf',
borderWidth: 1,
borderRadius: 15,
}}>
<Text style={{ width: '100%' }}>Change</Text>
</View>
</TouchableOpacity>
</View>
);
})}
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},

我按类使用了该组件，但将其更改为函数，它将给出 crt，逻辑基本上是这样的。