[英]React Native FlatList: Toggle State Value
我正在尝试为 FlatList 中的每个单独项目将文本状态从ACTIVE
切换到INACTIVE
(反之亦然)。 在下面的代码中, status
从true
切换到false
(以及false
到true
),但应用程序中的文本显示inactive
且不会更改。
import NameActionBar from '../components/NameActionBar';
export default class MasterScreen extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: [],
status: false,
};
}
componentDidMount() {
this.getFreelancerList();
}
//Calling API to get list
getFreelancerList() {
let self = this;
AsyncStorage.getItem('my_token').then((keyValue) => {
console.log('Master Screen (keyValue): ', keyValue); //Display key value
axios({
method: 'get',
url: Constants.API_URL + 'user_m/freelancer_list/',
responseType: 'json',
headers: {
'X-API-KEY': Constants.API_KEY,
'Authorization': keyValue,
},
})
.then(function (response) {
console.log('Response.Data: ===> ', response.data.data);
console.log('Response: ', response);
self.setState({
dataSource: response.data.data,
});
})
.catch(function (error) {
console.log('Error: ', error);
});
}, (error) => {
console.log('error error!', error) //Display error
});
}
//Show the list using FlatList
viewFreelancerList() {
const { dataSource } = this.state;
return (
<View>
{<FlatList
data={dataSource}
keyExtractor={({ id }, index) => index.toString()}
renderItem={({ item }) => {
return (
<View style={styles.containerFreelancer}>
<TouchableOpacity
style={{ flex: 1 }}
onPress={() => console.log(item.freelancer_name)}
>
<Text style={styles.textFreelancer}>{item.freelancer_name}</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
const newStatus = !this.state.status;
this.setState({
status: newStatus,
});
console.log('status: ', this.state.status);
}}
>
<Text>{this.state.status ? "ACTIVE" : "INACTIVE"}</Text>
</TouchableOpacity>
</View>
);
}}
/>}
</View>
);
}
render() {
return (
<>
<NameActionBar />
<ScrollView>
{this.viewFreelancerList()}
</ScrollView>
</>
);
}
}
我的问题是:
如何让文本在
active
和inactive
之间切换?如何为 FlatList 中的每个项目分别进行文本切换? 例如:
Item 1: 'ACTIVE', Item 2: 'INACTIVE'
等。
任何帮助将不胜感激,因为我仍然是学习 React Native 的新手。
以下应用程序截图:
您需要创建一个具有自己状态的子组件。
class FlatListComponent extends Component {
state = {
status: false
}
render() {
<View style={styles.containerFreelancer}>
<TouchableOpacity style={{ flex: 1 }} onPress={() => console.log(this.props.freelancer_name)}>
<Text style={styles.textFreelancer}>{this.props.freelancer_name}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={() => {
const newStatus = !this.state.status;
this.setState({
status: newStatus,
});
console.log('status: ', this.state.status);
}}
>
<Text>{this.state.status ? "ACTIVE" : "INACTIVE"}</Text>
</TouchableOpacity>
</View>
}
}
然后你只需要将它添加到你的renderItem
方法中。
<FlatList
data={dataSource}
keyExtractor={({ id }, index) => index.toString()}
renderItem={({ item }) => <FlatListComponent {...item}/>
/>}
这是一个工作示例
我希望它有帮助! 如果您仍然卡住,请随时添加评论
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.