Блог

Я новичок в react native, и я пытаюсь выделить текст с помощью флажка и выбрать только один текстовый элемент, должен ли я использовать button вместо этого?

как это на картинке

Реагирующий код

 <View style={styles.mainContainer}>
  <Text style={styles.title}>User Role</Text>
  <View style={styles.detailsContainer}>
    <View style={styles.rowContainer}>
      <Text style={styles.row}>Admin</Text>
    </View>
    <View style={styles.rowContainer}>
      <Text style={styles.row}>Assistant</Text>
    </View>
  </View>
</View>
  

Таблица стилей

 mainContainer: {
    marginTop: 20,
  },
 detailsContainer: {
    backgroundColor: '#FFF',
    marginTop: 10,
  },
title: {
    paddingLeft: 16,
    color: '#979797',
    textTransform: 'uppercase',
  },

  

Вы должны использовать TouchableOpacity from react-native и Icon from react-native-elements , а затем сделать это.

       <View style={styles.mainContainer}>
        <Text style={styles.title}>User Role</Text>
        <View style={styles.detailsContainer}>
          <TouchableOpacity
            style={styles.rowContainer}
            onPress={() => {
              this.setState({ adminIsChecked: true, assistantIsChecked: false });
            }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text style={styles.row}>Admin</Text>
              {this.state.adminIsChecked ?
                (<Icon name='check' />)
                :
                (null)
              }
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={styles.rowContainer}
            onPress={() => {
              this.setState({ assistantIsChecked: true, adminIsChecked: false });
            }}
          >
            <View style={{ flexDirection: 'row' }}>
              <Text style={styles.row}>Assistant</Text>
              {this.state.assistantIsChecked ?
                (<Icon name='check' />)
                :
                (null)
              }
            </View>
          </TouchableOpacity>
        </View>
      </View>
  

onPress() При нажатии на сенсорные элементы запускается триггер, запускающий функцию, в которой вы были определены.

Мы будем проверять один элемент, если его состояние проверено, делая их проверяемыми при onPress вызове и, очевидно, снимая флажок с другого.

Чтобы использовать изменение состояний приложения, которое мы используем this.setState() , и получить состояние this.state . Если вы заблудились в состоянии, я рекомендую вам сначала прочитать об этом здесь.

Вам нужно принять переменную для удержания выбранного элемента из списка.

  state = {
            selectedId: null
        }


     renderItem({ item }) {
        return (
            <TouchableOpacity
                onPress={() => {
                    this.setState({
                        selectedId: item.id
                    })
                }}>
                <View style={styles.mainContainer} >
                    <Text style={styles.title}>User Role</Text>
                    <View style={styles.detailsContainer}>
                        <View style={styles.rowContainer}>
                            <Text style={styles.row}>Admin</Text>
                        </View>
                        <View style={styles.rowContainer}>
                            <Text style={styles.row}>Assistant</Text>
                        </View>
                    </View>
                    {
                        this.state.selectedId === item.id ? <CHECK_MARK_IMAGE /> : null
                    }
                </View>
            </TouchableOpacity>
        )
    }
  

Я надеюсь, что вы помещаете свой собственный код react в один метод.