Блог

У меня есть компонент FlatList, импортированный из другого файла и отображаемый под представлением, в котором есть два компонента TouchableOpacity. Я намерен использовать компоненты TouchableOpacity в качестве вкладок для создания плоского списка с разными данными. Но когда список отображается, самый верхний элемент перекрывается с представлением, в котором есть вкладки TouchableOpacity, и я просто не могу понять, в чем проблема.

Рассматриваемый вид выглядит следующим образом, который сам находится в основном представлении контейнера

 <View style = {styles.jobsWorkContainer}>
            <TouchableOpacity onPress = {this.handleJobsChange}>
              <Text style = {this.state.postedJobsActivated ? (styles.jobsHeadingActive) : (styles.jobsHeadings)}>Posted Jobs</Text>
            </TouchableOpacity>
            <TouchableOpacity onPress = {this.handleJobsChange}>
              <Text style = {this.state.postedJobsActivated ? (styles.jobsHeadings) : (styles.jobsHeadingActive)}>Completed Jobs</Text>
            </TouchableOpacity>
          </View>
          {
            (this.state.postedJobsActivated) ? (
              <JobsList jobsData = {this.state.testData}/>
            ) : (
            <View style = {{top : 50}}>
              <Text>Here a similar list would appear for the jobs the user has completed</Text>
            </View>
          )
          }
 

Стиль для представления выше

 jobsWorkContainer : {
//backgroundColor : "yellow",
flexDirection : "row",
top: "5%",
width : "100%",
justifyContent : "space-evenly",
borderBottomColor : "antiquewhite",
borderBottomWidth : 2,
 

},

Это плоский список <Joblist/> , который я импортирую из другого файла следующим образом

     const renderJobList = (obj) =>{
  let source
  let navigation = obj.item.navigation
  /*than delete navigation object so that obj.item can be passed without any
  warning to the jobdetail page */
  delete obj.item.navigation
  //to solve the bug of sending dynamic require links for image tag in react native
  switch(obj.item.job)
  {
    case "carpenter":
      source= require(`./assets/carpenter.png`)
      break;
    case "painter":
      source = require(`./assets/painter.png`)
      break;
    case "electrician":
      source = require(`./assets/electrician.png`)
      break;
    case "plumber":
      source = require(`./assets/plumber.png`)
      break;
    default :
      source = require(`./assets/briefcase2.png`)
  }
  return (
  <TouchableOpacity
    style = {{top : 24}}
    onPress = {()=> navigation.navigate("jobDetail", obj.item)}>
    <View style={styles.container}>
      <View>
        <Image
          style = {{height : 50, width : 50}}
          source = {source}/>
      </View>
      <View style = {{left : 20}}>
        <Text style = {styles.jobHeading}>{obj.item.title}</Text>
      </View>


    </View>
  </TouchableOpacity>

)
}


const JobsList = (props) => {
  //to have navigation object available to this component that is not a navigation screen
  const navigation = useNavigation()

  /*adding the navigation object to every object of the data so that it
  is availabel to every rendered item in renderItem of flatlist*/
  let data = props.jobsData.map((ob)=> {
    return {
      ...ob, navigation
    }
  })
  return (
  <FlatList
    renderItem = {renderJobList}
    data = {data}
    keyExtractor = {(item, index) => index.toString()}
    contentContainerStyle = {{bottom : "5%",}}/>
)
}




JobsList.propTypes = {
  jobsData : PropTypes.array
}

const styles = StyleSheet.create({
  container : {
    padding : 20,
    borderColor: "grey",
    borderBottomWidth : 3,
    alignItems : "center",
    width : Math.round(Dimensions.get("window").width),
    flexDirection : "row",

  },
  jobHeading : {
    textDecorationLine : "underline",
    padding: 10,
    fontSize : 20,
  }
})



export default JobsList