React Native 我想实现一个提交按钮，就像这样，有一个透明的背景，但因为我是新的RN，我不能完全弄清楚

kx1ctssn 于 2023-01-02 发布在 React

关注(0)|答案(3)|浏览(88)

它不是我想要的Figma Design和Coded in React Native
我想让它浮动，并有一个透明的背景，而被粘在屏幕底部一样，我已经在菲格玛设计显示。

const TicketDetails = () => {
  return (
  <View style={{backgroundColor:'#D0DEEA', flex:1, position: 'relative'}}>
    <ScrollView style={styles.containerMain} showsVerticalScrollIndicator={false}>
      <View style={styles.topNavigation}>
        <Back/>
        <Close/>
      </View>
      <View style={styles.headingContainer}>
        <Text  style={styles.heading}>Create New Ticket</Text>
      </View>
      <View style={styles.formContainer}>
        <View style={{flexDirection:'row', justifyContent:'space-between'}}>
          <Text style={styles.formHeading}>Enter Ticket Details</Text>
          <Filter/>
        </View>
        <CustomDropdown data={serviceType} text={'Service Type'} placeholderText={'Select Service Type'}/>
        <CustomInput2 heading={'Assign Dealer'} placeholder={''}/>
        <CustomInput2 heading={'HMR'} placeholder={'Enter HMR Value'}/>
        <CustomDropdown data={criticality} text={'Criticality'} placeholderText={'Select Criticality'}/>
        <CustomDropdown text={'Customer Concerns'} placeholderText={'Select..'}/>
        <CustomInput2 heading={'Expected Date'} placeholder={'31 Dec 2022'}/>
      </View>
    </ScrollView>
    <View style={styles.nextButton}>
      <Submit text='Next' style={{position:'absolute'}}/>
    </View> 
  </View>
  )
}

const styles = StyleSheet.create({
  containerMain:{
    marginTop:60,
    backgroundColor:'#D0DEEA',
    opacity:1,
    position:'relative'
  },

  formContainer:{
    flex:0.7,
    backgroundColor: 'white',
    borderRadius: 35,
    marginTop:40,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.4,
  },

  nextButton:{
    flexDirection: 'column', 
    flexGrow: 1,            
    justifyContent: 'space-between',
  },

  topNavigation:{
    marginLeft:13,
    marginRight:13,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }

})

它要么在滚动结束处，要么看起来没有浮动。

react-native

来源：https://stackoverflow.com/questions/74964807/i-want-to-implement-a-submit-button-just-like-this-with-a-transparent-background

3条答案

按热度按时间

yxyvkwin1#

给你的例子：

import React from 'react';
import { Image,View, ScrollView, 
Text,TouchableOpacity } from 'react- 
native';

const logo = {
  uri: 

'https://reactnative.dev/img/tiny_logo.png',
  width: 64,
  height: 64
    };

const App = () => (
<View>
<ScrollView>
<Text style={{ fontSize: 96 }}>Scroll me 
plz</Text>
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />

<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Image source={logo} />
<Text style={{ fontSize: 96 }}>Scrolling 
 down</Text><Image source={logo} />
<Text style={{ fontSize: 96 }}>What's the 
best</Text>

<Text style={{ fontSize: 96 }}>Framework 
around?</Text>

<Text style={{ fontSize: 80 }}>React 
Native</Text>
</ScrollView>
<TouchableOpacity style={{
position: 'absolute',
width: '90%',
height: 50,
 alignItems: 'center',
 justifyContent: 'center',
 bottom: 30,
 left:15,
 right:5,
 backgroundColor:'#ff00ff',
 borderRadius:20
}} >

  <Text >text</Text>

</TouchableOpacity>
</View>
);

export default App;

赞(0）回复(0）举报 2023-01-02

5lhxktic2#

这是一个基本的CSS知识要求。
增加**位置：“relative'对应于应在其下对齐的区域的样式。
增加位置：“绝对”**到你的按钮样式。你的愿望将实现。
如果这没有帮助，请分享您的示例代码。

// this card component
<View style={{position: 'relative'}}>

    // this button component
    <TouchableOpacity style={{position: 'absolute', bottom: 0}}>
        <Text>Hello World</Text>
    </TouchableOpacity>

</View>

赞(0）回复(0）举报 2023-01-02

ep6jt1vc3#

const TicketDetails = () => {
return (
<View style={{backgroundColor:'#D0DEEA', flex:1, position: 'relative'}}>
<ScrollView style={styles.containerMain} showsVerticalScrollIndicator={false}>
  <View style={styles.topNavigation}>
    <Back/>
    <Close/>
  </View>
  <View style={styles.headingContainer}>
    <Text  style={styles.heading}>Create New Ticket</Text>
  </View>
  <View style={styles.formContainer}>
    <View style={{flexDirection:'row', justifyContent:'space-between'}}>
      <Text style={styles.formHeading}>Enter Ticket Details</Text>
      <Filter/>
    </View>
    <CustomDropdown data={serviceType} text={'Service Type'} placeholderText={'Select Service Type'}/>
    <CustomInput2 heading={'Assign Dealer'} placeholder={''}/>
    <CustomInput2 heading={'HMR'} placeholder={'Enter HMR Value'}/>
    <CustomDropdown data={criticality} text={'Criticality'} placeholderText={'Select Criticality'}/>
    <CustomDropdown text={'Customer Concerns'} placeholderText={'Select..'}/>
    <CustomInput2 heading={'Expected Date'} placeholder={'31 Dec 2022'}/>
  </View>
</ScrollView>
  <TouchableOpacity style={{
position: 'absolute',
 width: '90%',
 height: 50,
 alignItems: 'center',
 justifyContent: 'center',
 bottom: 30,
 left:15,
 right:5,
 backgroundColor:'#ff00ff',
 borderRadius:20
}} >

  <Text >text</Text>

</TouchableOpacity>

  </View>
 )
   }

赞(0）回复(0）举报 2023-01-02

我来回答

React Native 我想实现一个提交按钮，就像这样，有一个透明的背景，但因为我是新的RN，我不能完全弄清楚

3条答案

相关问题

热门标签

最新问答