OStack程序员社区-中国程序员成长平台

标题: ios - 用复选标记 react native 选择文本 [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 05:24
标题: ios - 用复选标记 react native 选择文本

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

like this in the picture

react 代码

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

---

Best Answer-推荐答案

您必须使用 react-native 中的 TouchableOpacity 和 react-native-elements 中的 Icon，然后执行此操作。

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

Touchable 项目的 onPress() 在它们被按下时会收到一个触发器，从而触发您在其中定义的函数。

如果状态被检查，我们将检查一项，当调用 onPress 时检查它们，显然，取消选中另一个。

要使用应用程序的更改状态，我们使用 this.setState() 并获取状态 this.state。如果您对状态感到迷茫，我建议您先阅读一下 here .

关于ios - 用复选标记 react native 选择文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55634491/

---

欢迎光临 OStack程序员社区-中国程序员成长平台 (https://ostack.cn/)

Powered by Discuz! X3.4