簡體   English   中英

zIndex doot可在本機卡上運行-反應本機

[英]zIndex doesot work on Card of native-base - react native

我正在使用native-base 這是我的代碼:

                     <View style={{width:'100%',height:45}}>
                      <Card style={{position:'absolute',zIndex:90,paddingTop: 0, marginRight:10,width: '100%', alignSelf: 'center',borderRadius:10,padding:10,height:45 }}>
                        <CardItem style={{ position:'absolute', zIndex:1,backgroundColor: '#fff', height: 45, width: '100%', paddingTop: 0, paddingBottom: 0, justifyContent: 'flex-end' }}>
                          <TouchableOpacity onPress={() => this.onClickSubs(sub)} style={{height:'100%',width:'100%'}}>
                            <Text onPress={() => this.onClickSubs(sub)} style={{ textAlign: 'center', fontSize: 16, color: colorConstants.GRAY_LIGHT_COLOR }}>{sub.title}</Text>
                          </TouchableOpacity>
                        </CardItem>
                      </Card>
                      <View style={{position:'absolute',zIndex:999,right:0,width:20,height:20,borderRadius:10,borderWidth:2,borderColor:'#fff',backgroundColor:colorConstants.PRIMARY_COLOR,alignSelf:'center',justifyContent:'center',alignItems:'center'}}>
                      </View> //circle view

                      </View>

但是我的圈子視圖是Card背景:

只需在您的圓形視圖樣式中添加高程

        <View
          style={{
            position: "absolute",
            zIndex: 999,
            right: 0,
            width: 20,
            height: 20,
            borderRadius: 10,
            borderWidth: 2,
            borderColor: "#fff",
            backgroundColor: "red",
            alignSelf: "center",
            justifyContent: "center",
            alignItems: "center",
            elevation:3  <-----------elevation in circle view---------
          }}
        />

無海拔

在此處輸入圖片說明

帶高程

在此處輸入圖片說明

<input>和<textarea></textarea>未在 native-base 中對齊,React Native&lt;/div&gt;<div id="text_translate"><p> 我想使用原生基礎將單行輸入和多行輸入放入表單中,但它們未正確對齊垂直線。 有什么我遺漏的或者不應該一起使用的嗎? 謝謝你。</p><p> package.json 的一部分</p><pre> "expo": "~37.0.3", "native-base": "2.13.8", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",</pre><p> 我的代碼</p><pre class="lang-js prettyprint-override"> &lt;Content padder&gt; &lt;Form&gt; &lt;Item regular floatingLabel&gt; &lt;Label style={{paddingTop: 2}}&gt;Label&lt;/Label&gt; &lt;Input onChangeText={url =&gt; setUrl(url)}/&gt; &lt;/Item&gt; &lt;Textarea rowSpan={5} onChangeText={content =&gt; setContent(content)} bordered placeholder="this is textarea" /&gt; &lt;/Form&gt; &lt;/Content&gt;</pre><p> <a href="https://i.stack.imgur.com/gSyge.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gSyge.png" alt="模擬器截圖"></a></p><p> ========已編輯</p><p>我找到了答案,只需將 floatingLabel 替換為常規。 但是,占位符仍未對齊。</p><pre class="lang-js prettyprint-override"> &lt;Item regular&gt; &lt;Label&gt;URL&lt;/Label&gt; &lt;Input onChangeText={url =&gt; setUrl(url)}/&gt; &lt;/Item&gt;</pre><p> <a href="https://i.stack.imgur.com/kWwZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWwZs.png" alt="在此處輸入圖像描述"></a></p></div>

[英]<Input /> and <Textarea /> are not aligned in native-base, React Native

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 React-Native native-base 如何減少卡片項目之間的間距? 如何在反應原生中更改基於原生的 Picker fontSize 和 fontFamily? <input>和<textarea></textarea>未在 native-base 中對齊,React Native&lt;/div&gt;<div id="text_translate"><p> 我想使用原生基礎將單行輸入和多行輸入放入表單中,但它們未正確對齊垂直線。 有什么我遺漏的或者不應該一起使用的嗎? 謝謝你。</p><p> package.json 的一部分</p><pre> "expo": "~37.0.3", "native-base": "2.13.8", "react": "~16.9.0", "react-dom": "~16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",</pre><p> 我的代碼</p><pre class="lang-js prettyprint-override"> &lt;Content padder&gt; &lt;Form&gt; &lt;Item regular floatingLabel&gt; &lt;Label style={{paddingTop: 2}}&gt;Label&lt;/Label&gt; &lt;Input onChangeText={url =&gt; setUrl(url)}/&gt; &lt;/Item&gt; &lt;Textarea rowSpan={5} onChangeText={content =&gt; setContent(content)} bordered placeholder="this is textarea" /&gt; &lt;/Form&gt; &lt;/Content&gt;</pre><p> <a href="https://i.stack.imgur.com/gSyge.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gSyge.png" alt="模擬器截圖"></a></p><p> ========已編輯</p><p>我找到了答案,只需將 floatingLabel 替換為常規。 但是,占位符仍未對齊。</p><pre class="lang-js prettyprint-override"> &lt;Item regular&gt; &lt;Label&gt;URL&lt;/Label&gt; &lt;Input onChangeText={url =&gt; setUrl(url)}/&gt; &lt;/Item&gt;</pre><p> <a href="https://i.stack.imgur.com/kWwZs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kWwZs.png" alt="在此處輸入圖像描述"></a></p></div> 反應原生卡(原生基礎)onPress 不起作用 Native-Base 3:菜單項的 Onpress 如何使用native-base在react-native中使圖像上的半透明按鈕? 反應原生:有沒有辦法只在原生庫的手風琴的 3 選項卡中定位圖標? 刪除按鈕輪廓本機基礎 React native - 安裝native-base后要包含在版本控制中的文件? 標簽內的React-Native Set響應式圖標(本機基形式)
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM