Question

我正在尝试为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还是陌生的。

以下应用的屏幕截图：

Answer 1

您需要创建一个具有其自身状态的子组件。

@PostMapping("/api/logout")
public Mono<Map<String, String>> logout(@AuthenticationPrincipal(expression = "idToken") OidcIdToken idToken, WebSession session) {
    return session.invalidate().then(
        this.registration.map(oidc -> oidc.getProviderDetails().getConfigurationMetadata().get("end_session_endpoint").toString())
            .map(logoutUrl -> {
                Map<String, String> logoutDetails = new HashMap<>();
                logoutDetails.put("logoutUrl", logoutUrl);
                logoutDetails.put("idToken", idToken.getTokenValue());
                return logoutDetails;
            })
    );
}

然后，您只需要将其添加到echo off set freacpath="%programfiles(x86)%\freac\freaccmd.exe" rem going through folders with recursion and then through all flac files rem to convert to mp3 using freac LAME vbr quality 0 (best) for /d /r %%i in (*) do ( rem check if the current folder is already named "mp3" rem prior creating the mp3 folder if /I not "%%~ni" == "mp3" ( if not exist "%%i\MP3\NUL" md "%%i\MP3" ) rem echo %%~ni for %%j in ("%%i"\*) do ( rem echo %%~nj IF "%%~xj" == ".flac" ( %freacpath% -e LAME -m VBR -q 0 -o "%%i\mp3\%%~nj".mp3 "%%j" ) ) ) PAUSE方法中即可。

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>
  }
}

这里是working example

我希望它会有所帮助！如果您仍然遇到困难，请随时添加评论

反应本机FlatList：切换状态值

1 个答案: