菜鸟教程小白 发表于 2022-12-11 19:38:39

javascript - 如何在 React Native 中居中按钮


                                            <p><p>我是 React Native 的新手,目前正在学习这项技术。
<br/>我开始创建一个带有按钮的简单布局。
<br/>但是我的按钮是左对齐的,我怎样才能让它居中呢?
<br/>我试过 <code>alignItems: 'center</code> 和 <code>justifyContent: 'center</code>
<br/>但它不起作用。
<br/>我希望有人可以帮助我,以便我可以转到另一个组件</p>

<p><br/>我的按钮如下所示:</p>

<p> <a href="/image/1SRpm.png" rel="noreferrer noopener nofollow"><img src="/image/1SRpm.png" alt="enter image description here"/></a> </p>

<p><br/>这里是我的一些代码:</p>

<p></p><div class="snippet"data-lang="js"data-hide="false"data-console="true"data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;Container&gt;
                &lt;View style={styles.tabContent}&gt;
                  &lt;Text style={styles.title}&gt;Engineering&lt;/Text&gt;
                  &lt;Text style={styles.subtitle}&gt;Inquiries Need Action&lt;/Text&gt;
                &lt;/View&gt;
                &lt;View style={styles.buttonsContainer}&gt;
                  &lt;Button bordered dark style={styles.buttonTop}&gt;
                        &lt;View style={styles.buttonText}&gt;
                            &lt;Text&gt;10&lt;/Text&gt;
                            &lt;Text&gt;Dark&lt;/Text&gt;
                        &lt;/View&gt;
                        &lt;View style={styles.buttonIcon}&gt;
                            &lt;Icon name=&#39;ios-construct-outline&#39; style={styles.icons}/&gt;
                        &lt;/View&gt;
                  &lt;/Button&gt;
                  &lt;Button bordered dark style={styles.button}&gt;
                        &lt;View style={styles.buttonText}&gt;
                            &lt;Text&gt;10&lt;/Text&gt;
                            &lt;Text&gt;Dark&lt;/Text&gt;
                        &lt;/View&gt;
                        &lt;View style={styles.buttonIcon}&gt;
                            &lt;Icon name=&#39;ios-construct-outline&#39; style={styles.icons}/&gt;
                        &lt;/View&gt;
                  &lt;/Button&gt;
                  &lt;Button bordered dark style={styles.button}&gt;
                        &lt;View style={styles.buttonText}&gt;
                            &lt;Text&gt;10&lt;/Text&gt;
                            &lt;Text&gt;Dark&lt;/Text&gt;
                        &lt;/View&gt;
                        &lt;View style={styles.buttonIcon}&gt;
                            &lt;Icon name=&#39;ios-construct-outline&#39; style={styles.icons}/&gt;
                        &lt;/View&gt;
                  &lt;/Button&gt;
                  &lt;Button bordered dark style={styles.buttonView}&gt;
                        &lt;View&gt;
                            &lt;Text style={styles.text}&gt;VIEW ALL&lt;/Text&gt;
                        &lt;/View&gt;
                  &lt;/Button&gt;
                &lt;/View&gt;
            &lt;/Container&gt;</code></pre>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
                                            <p><p>在 buttonContainer 上方创建一个包装器 View 并赋予它 style={{flex: 1}}</p>

<pre><code> &lt;View style={{flex:1}}&gt;
&lt;View style={styles.buttonsContainer}&gt;
....
&lt;/View&gt;
&lt;/View&gt;
</code></pre>

<p><code>alignItems</code> 和 <code>justifyContent</code> 是在父容器中定义 flex 时适用的 flex 属性</p></p>
                                   
                                                <p style="font-size: 20px;">关于javascript - 如何在 React Native 中居中按钮,我们在Stack Overflow上找到一个类似的问题:
                                                        <a href="https://stackoverflow.com/questions/48374711/" rel="noreferrer noopener nofollow" style="color: red;">
                                                                https://stackoverflow.com/questions/48374711/
                                                        </a>
                                                </p>
                                       
页: [1]
查看完整版本: javascript - 如何在 React Native 中居中按钮