论坛 › 知识问答 › ios - 用复选标记 react native 选择文本

菜鸟教程小白 发表于 2022-12-13 05:24:05

ios - 用复选标记 react native 选择文本

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

<p> <a href="/image/2VQJC.png" rel="noreferrer noopener nofollow">like this in the picture </a> </p>

<p> react 代码</p>

<pre><code>&lt;View style={styles.mainContainer}&gt;
&lt;Text style={styles.title}&gt;User Role&lt;/Text&gt;
&lt;View style={styles.detailsContainer}&gt;
    &lt;View style={styles.rowContainer}&gt;
      &lt;Text style={styles.row}&gt;Admin&lt;/Text&gt;
    &lt;/View&gt;
    &lt;View style={styles.rowContainer}&gt;
      &lt;Text style={styles.row}&gt;Assistant&lt;/Text&gt;
    &lt;/View&gt;
&lt;/View&gt;
&lt;/View&gt;
</code></pre>

<p>样式表</p>

<pre><code>mainContainer: {
    marginTop: 20,
},
detailsContainer: {
    backgroundColor: &#39;#FFF&#39;,
    marginTop: 10,
},
title: {
    paddingLeft: 16,
    color: &#39;#979797&#39;,
    textTransform: &#39;uppercase&#39;,
},

</code></pre></p>
                                    <br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>您必须使用 react-native 中的 <code>TouchableOpacity</code> 和 <code>react-native-elements</code> 中的 Icon，然后执行此操作。</p>

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

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

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

<p>要使用应用程序的更改状态，我们使用 <code>this.setState()</code> 并获取状态 <code>this.state</code>。如果您对状态感到迷茫，我建议您先阅读一下 <a href="https://facebook.github.io/react-native/docs/state" rel="noreferrer noopener nofollow">here</a> .</p></p>
                                   
                                                <p style="font-size: 20px;">关于ios - 用复选标记 reactnative 选择文本，我们在Stack Overflow上找到一个类似的问题：
                                                        <a href="https://stackoverflow.com/questions/55634491/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/55634491/
                                                        </a>
                                                </p>
                                       

查看完整版本: ios - 用复选标记 react native 选择文本