时间戳

首页 > 解决方案 > 用复选标记反应本机选择文本

ios - 用复选标记反应本机选择文本

问题描述

我是本机反应的新手，我正在尝试使用复选标记进行文本选择并仅选择一个文本元素，我是否必须使用按钮来代替？

像图片中这样

反应代码

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

标签： iosreact-native

解决方案

您需要从列表中保留所选项目的变量。

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

我希望您将反应本机代码放入一种方法中。

推荐阅读