Как использовать флажки в реагировать родной?

Question

У меня есть список тем, которые пользователь может выбрать, и после этого я сделаю вызов API, основываясь на выбранных темах, у меня все работает, но мне нужно поменять текст на флажки

Вот мое состояние:

     this.state = {
      loading: false,
      dataSource: [],
      error: null,
      topic: '',
  }

Вот мой вызов API:

   getUsers = () => {
    fetch('https://someapi.com/?topic=' + this.state.topic, {method: 'GET'}).then((response) => response.json()).then((responseJson) => {
      this.setState({
        loading: false,
        error: responseJson.error || null,
        dataSource: responseJson.data.users,
      });
    }).catch((error) => {
      this.setState({error, loading: false});
    });
  }

Здесь моя тема в методе рендеринга, которая работает отлично, но мне нужно поменять текст на флажки:

    <View>
     <Text onPress={(text) => this.setTopic('topic-slug1')}>Some Topic</Text>
     <Text onPress={(text) => this.setTopic('topic-slug2')}>Some Topic</Text> 
     <Text onPress={(text) => this.setTopic('topic-slug3')}>Some Topic</Text>           
    </View>

А вот setTopic() функция:

   setTopic(searchedTopic) {
    this.setState({topic: searchedTopic});
  }

Мне просто нужно использовать Флажки вместо <Text> для использования на Android и IOS

Answer 1

Убедитесь, что вы должны добавить условие, основываясь на установленном флажке true или false

Вот демоверсия с плагином: https://github.com/crazycodeboy/react-native-check-box#readme

constructor(props){
    super(props);
    this.state = {
        topic: null,
        checkTopic1: false,
        checkTopic2: false,
        checkTopic3: false,
    }
}

setTopic = (slug) => {
    if(slug == "topic-slug1"){
        this.setState({
            checkTopic1:!this.state.checkTopic1
        })
    }else if(slug == "topic-slug2"){
        this.setState({
            checkTopic2:!this.state.checkTopic2
        })
    }else if(slug == "topic-slug3"){
        this.setState({
            checkTopic3:!this.state.checkTopic3
        })
    }
    this.setState({
        topic: slug
    })
    this.getUsers();
}

getUsers = () => {
    fetch('https://someapi.com/?topic=' + this.state.topic, {method: 'GET'}).then((response) => response.json()).then((responseJson) => {
      this.setState({
        loading: false,
        error: responseJson.error || null,
        dataSource: responseJson.data.users,
      });
    }).catch((error) => {
      this.setState({error, loading: false});
    });
}


<View>
    <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=> this.setTopic('topic-slug1')}
        isChecked={this.state.checkTopic1}
        leftText={"Some Topic"}
    />
    <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=> this.setTopic('topic-slug2')}
        isChecked={this.state.checkTopic2}
        leftText={"Some Topic"}
    />
    <CheckBox
        style={{flex: 1, padding: 10}}
        onClick={()=> this.setTopic('topic-slug3')}
        isChecked={this.state.checkTopic3}
        leftText={"Some Topic"}
    />
</View>