Akkordeon - Collapse View inSide the TouchableOpacity funktioniert nicht

Question

In meinem Projekt verwende ich das Akkordeon für Expand und Collapse. es funktioniert gut. In der Minimierungsansicht habe ich eine TouchableOpacity festgelegt, deren Ereignis jedoch nicht funktioniert.

Sehen Sie den Code,

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View , 
    TextInput, 
    ScrollView, 
    TouchableOpacity, 
    Image, 
    Button, 
    TouchableHighlight, 
    FlatList, 
    TouchableNativeFeedback, 
    TouchableWithoutFeedback, 
    Alert, 
} from 'react-native'; 

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view' 
import { StackNavigator } from 'react-navigation' 
import Accordion from 'react-native-collapsible/Accordion'; 
import { List, ListItem ,Avatar} from 'react-native-elements' 



    var options = { 
    title: 'Select Avatar', 
    customButtons: [ 
     {name: 'fb', title: 'Choose Photo from Facebook'}, 
    ], 
    storageOptions: { 
     skipBackup: true, 
     path: 'images' 
    } 
    }; 

    const SECTIONS = [ 
    { 
     title: 'LUCAS F.', 
     content: 'NORTH BONDI', 
     jobName : 'CHILD CARE CENTER', 
     Address : '32 LEVEY STREET \n GREEN SQUARE', 
     job : 'GENERAL LABOURER', 
     jobTime : [ 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     }, 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     }, 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     }, 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     },{ 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     }, 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     }, 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     }, 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     } 
     ] 
    }, 
    { 
     title: 'MATTHEW N.', 
     content: 'NORTH BONDI.', 
     jobName : 'CHILD CARE CENTER', 
     Address : '32 LEVEY STREET \n GREEN SQUARE', 
     job : 'GENERAL LABOURER', 
     jobTime : [ 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     }, 
     { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
     } 
     ] 
    }, 
    { 
     title: 'NEIL E.', 
     content: 'GREEN SQUARE', 
     jobName : 'CHILD CARE CENTER', 
     Address : '32 LEVEY STREET \n GREEN SQUARE', 
     job : 'GENERAL LABOURER', 
     jobTime : [ 
      { 
      date : '06/03', 
      start : '7 am', 
      break : '30 min', 
      finish : '3:30', 
      } 
     ] 

     } 
    ]; 


export default class TimeSheet extends Component { 

     state = { 
     emailID: '', 
     password: '', 
     confirmPassword : '', 
     firstName : '', 
     lastName : '', 
     role : '', 
     phone : '', 

    } 



    constructor(props) { 
     super(props); 
     this.state = {text: ''}; 
     this.state = { 
      titleText: "ADD A", 
      bodyText: 'MANAGER', 
      heightDynamic : 0, 
     }; 
     } 

     spadeOptionPush =() =>{ 
     Alert.alert('You tapped the button!') 
     } 



    // static navigationOptions = ({ navigation }) => ({ 
    // title: `${navigation.state.params.user}`, 
    // }); 

    _renderHeader(section) { 
     return (
      <View style={styles.header}> 
      <View style = {{width : '30%' , height : '100%' , alignItems : 'center' , justifyContent : 'center' , marginLeft : 20}}> 
       <Avatar 
       rounded 
       medium 
       source={{uri: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg"}} 
       activeOpacity={0.7}/> 
      </View> 
      <View style = {{width : '70%' , height : '100%' , flexDirection : 'column' , alignItems : 'flex-start' , justifyContent : 'center'}}> 
       <Text style={[styles.headerText , {fontSize : 17}]}>{section.title}</Text> 
       <Text style={[styles.headerText , {fontSize : 14}]}>{section.content}</Text> 
      </View> 
      </View> 
     ); 
     } 


    _renderContent(section) { 

     heightDynamic = (section.jobTime.length) * 70; 
     console.log(heightDynamic); 

     return (
      <View style={styles.backExpandView}> 

      <View style = {styles.mainExpandView}> 

       <Image style={{width: '80%', height: 15,justifyContent: 'center' ,alignItems: 'center' , marginLeft : '10%' , marginTop : 10}} 
         source={require("./Images/jobDetails.png")} /> 

       <Text style = {styles.jobTitle}>Job Name</Text> 
       <Text style = {styles.jobDescription}>{section.jobName}</Text> 

       <Text style = {styles.jobTitle}>Address</Text> 
       <Text style = {styles.jobDescription}>{section.Address}</Text> 

       <Text style = {styles.jobTitle}>Job</Text> 
       <Text style = {styles.jobDescription}>{section.job}</Text> 
       <Text style = {styles.jobTitle}></Text> 

      </View> 

      {/*LIST VIEW*/} 

      <List style={{borderBottomWidth: 0 , borderTopWidth: 0 , height : heightDynamic}} 
        containerStyle={{marginTop : 10 , backgroundColor : 'transparent'}}> 


       <FlatList 
       data={section.jobTime} 
       renderItem={({ item }) => (
        <ListItem containerStyle={{height: 70, backgroundColor : '#070808' , marginLeft : 10 , marginRight : 10, borderBottomColor: 'transparent'}} 
        hideChevron = {true} 
        title={ 
         <View style = {{height : '100%' , width : '100%' , flexDirection : 'row' , alignItems : 'flex-start' , justifyContent : 'flex-start'}}> 

         <View style = {{width : '25%' , height : '100%' , justifyContent : 'center' , alignItems : 'center'}}> 
          <Text style ={{fontFamily: 'Gotham-Black',fontSize : 14 ,color: 'white'}}>{item.date}</Text> 
         </View> 

         <View style = {{width : '25%' , height : '100%' , justifyContent : 'center' , alignItems : 'center' , flexDirection : 'column'}}> 
          <Text style ={{fontFamily: 'Gotham-Black',fontSize : 14 ,color: '#DE6E26'}}>{item.start}</Text> 
          <Text style ={{fontFamily: 'Gotham-Light',fontSize : 14 ,color: 'white'}}>Start</Text> 
         </View> 

         <View style = {{width : '25%' , height : '100%' , justifyContent : 'center' , alignItems : 'center' , flexDirection : 'column'}}> 
          <Text style ={{fontFamily: 'Gotham-Black',fontSize : 14 ,color: '#DE6E26'}}>{item.break}</Text> 
          <Text style ={{fontFamily: 'Gotham-Light',fontSize : 14 ,color: 'white'}}>Break</Text> 

         </View> 

         <View style = {{width : '25%' , height : '100%' , justifyContent : 'center' , alignItems : 'center' , flexDirection : 'column'}}> 
          <Text style ={{fontFamily: 'Gotham-Black',fontSize : 14 ,color: '#DE6E26'}}>{item.finish}</Text> 
          <Text style ={{fontFamily: 'Gotham-Light',fontSize : 14 ,color: 'white'}}>End</Text> 
         </View> 
         </View> 
        } 
        /> 
       )} 
       /> 
      </List> 


      {/*Approved*/} 

      {/* <TouchableOpacity onPress={() => this.changeStyle()}/> */} 

      <TouchableNativeFeedback 
        onPress={this.approvalSection}> 
        <View style={{width: 150, height: 100, backgroundColor: 'red'}}> 
        <Text style={{margin: 30}}>Button</Text> 
        </View> 
      </TouchableNativeFeedback> 

      <TouchableWithoutFeedback 
        onPress={this.approvalSection}> 
        <View style={{width: 150, height: 100, backgroundColor: 'red'}}> 
        <Text style={{margin: 30}}>Button</Text> 
        </View> 
      </TouchableWithoutFeedback> 

      <Button 
       onPress={() => {Alert.alert('You tapped the button!')}} 
       title="Learn More" 
       color="#841584" 
       accessibilityLabel="Learn more about this purple button" 
      /> 

      <TouchableOpacity onPress={() => {this.spadeOptionPush}}> 

      {/* <TouchableOpacity onPress={() => this.approvalSection}> */} 
       <View style ={[styles.thirdV ,{backgroundColor : '#7DA137',height : 90}]}> 
       <View style = {{height : '100%' , width : '30%' , alignItems: 'center', justifyContent: 'center'}}> 
        <Image style={{width: 20, height: 34,justifyContent: 'center' ,alignItems: 'center'}} 
         source={require("./Images/iconTimeStemp.png")} /> 
       </View> 
       <View style = {{height : '100%' , width : '40%' , justifyContent: 'center' ,alignItems: 'flex-start', flexDirection : 'column'}}> 
        <Text style = {{fontFamily: 'Gotham-Black',fontSize : 16 ,color: 'white'}}> 
        APPROVED 
        </Text> 
       </View> 
       <View style = {{height : '100%' , width : '30%' , alignItems: 'center', justifyContent: 'center'}}> 
        <Image style={{width: 27, height: 22,justifyContent: 'center' ,alignItems: 'center'}} 
          source={require("./Images/arrow.png")} /> 
       </View> 
       </View> 
      </TouchableOpacity> 

     {/*Delete Job*/} 

     <TouchableOpacity> 
      <View style ={[styles.thirdV ,{height : 90 , backgroundColor : '#161617' , marginBottom : 20}]}> 
      <View style = {{height : '100%' , width : '30%' , alignItems: 'center', justifyContent: 'center'}}> 
       <Image style={{width: 25, height: 25,justifyContent: 'center' ,alignItems: 'center'}} 
         source={require("./Images/addWorkers.png")} /> 
      </View> 
      <View style = {{height : '100%' , width : '40%' , justifyContent: 'center' ,alignItems: 'flex-start', flexDirection : 'column'}}> 
       <Text style = {{fontFamily: 'Gotham-Black',fontSize : 14 ,color: '#DE6E26'}}> 
       REPORT 
       </Text> 
       <Text style = {{fontFamily: 'Gotham-Black',fontSize : 14 ,color: 'white'}}> 
       A PROBLEM 
       </Text> 
      </View> 
      <View style = {{height : '100%' , width : '30%' , alignItems: 'center', justifyContent: 'center'}}> 
       <TouchableHighlight onPress={() => navigate('AddManager' , {user : 'Add Manager'})}> 
       <Image style={{width: 27, height: 22,justifyContent: 'center' ,alignItems: 'center'}} 
         source={require("./Images/arrow.png")} /> 
       </TouchableHighlight> 
      </View> 

      </View> 
     </TouchableOpacity> 
     </View> 
     ); 
     } 


    render(){ 

     const { navigate } = this.props.navigation; 

     return (

      <ScrollView style = {styles.scrollSty}> 
      <View style = {styles.container}> 
       <Image style = {styles.imageSty} 
        source={require('./Images/topImage.png')} 
       /> 

       {/* Add View with Row element. */} 

       <View style ={styles.hireView}> 
        <View style = {{height : '100%' , width : '30%' , alignItems: 'center', justifyContent: 'center'}}> 
        <Image style={{width: 30, height: 30,justifyContent: 'center' ,alignItems: 'center'}} 
          source={require("./Images/hireJob.png")} /> 
        </View> 
        <View style = {{height : '100%' , width : '60%' , justifyContent: 'center' ,alignItems: 'flex-start', flexDirection : 'column'}}> 
        <Text style = {{fontFamily: 'Gotham-Black',fontSize : 17 ,color: '#DE8C22'}}> 
         TIMESHEET 
        </Text> 
        <Text style = {{fontFamily: 'Gotham-Black',fontSize : 17 ,color: 'white'}}> 
         PENDING{"\n"} 
         APPROVALS 
        </Text> 

        </View> 
       </View> 


       <View style = {{marginTop : 20 , marginBottom : 10 ,width : '100%' , height : 20 , alignItems : 'center' , justifyContent : 'center'}}> 
        <Image style = {{height : 15}} 
        source={require('./Images/activeJob.png')} 
        /> 
       </View> 

       <Accordion 
        sections={SECTIONS} 
        renderHeader={this._renderHeader} 
        renderContent={this._renderContent} 
        /> 

      </View> 
     </ScrollView> 
     ); 
    } 
    } 

    const styles = StyleSheet.create({ 

     imageProfile :{ 
     height : 35, 
     width : 35, 
     }, 
     imageSty : { 
     marginLeft : 10, 
     marginRight :10, 
     }, 
     addManagerTxtStyle :{ 
     fontFamily: 'Gotham-Bold', 
     fontSize : 18, 
     textAlign : 'left', 
     }, 
     textSty : { 
     fontFamily: 'Gotham-Bold', 
     fontSize : 15, 
     fontWeight: 'bold', 
     marginLeft : 35, 
     marginTop : 20, 
     color : '#C46427', 
     justifyContent: 'flex-start', 
     alignItems: 'flex-start', 

     }, 
     scrollSty :{ 
     flex : 1, 
     backgroundColor: '#141415', 
     }, 
     container: { 
     flex: 1, 
     paddingTop : 30, 
     }, 
     titleImageStyle :{ 
     margin : 25, 
     justifyContent: 'center', 
     alignItems: 'center', 
     }, 
     emailIdSt : { 
     marginBottom : 5, 
     fontSize : 17, 
     marginTop : 10, 
     marginLeft : 15, 
     marginRight : 15, 
     }, 
     input: { 
     fontFamily: 'Gotham-Thin', 
     marginLeft: 35, 
     marginRight: 35, 
     height: 40, 
     backgroundColor : '#B1B1B1', 
     paddingLeft : 10, 

    }, 
    submitButton: { 
     backgroundColor: '#DE8C22', 
     padding: 10, 
     margin: 15, 
     height: 100, 
     width : '90%', 
    }, 

    submitButtonText:{ 
     justifyContent: 'center', 
     fontFamily: 'Gotham-Bold', 
     fontSize : 20, 
     fontWeight: 'bold', 
     color: 'white', 
    }, 
    viewStyleRow :{ 
     flexDirection: 'row', 
     height : 120, 
     width : '100%', 
     justifyContent: 'flex-start', 
     alignItems: 'center', 
     backgroundColor : 'white', 
    }, 
    viewAddManagerText:{ 
     height : 60, 
     justifyContent: 'center', 
     alignItems: 'flex-start', 

    }, 
    headerTitleStyle :{ 
     marginLeft : 25, 
     marginRight : 25, 
     marginTop : 15, 
     fontFamily: 'Gotham-Thin', 
     fontSize : 18, 
     color: '#DE8C22', 
    }, 
    thirdV :{ 
     flexDirection : 'row', 
     marginLeft : 10, 
     marginRight : 10, 
    }, 
    hireView :{ 
     marginTop : 30, 
     height : 90, 
     backgroundColor : 'transparent', 
     flexDirection : 'row', 
    }, 
    header :{ 
     backgroundColor : '#7DA137', 
     height : 80, 
     width : '100%', 
     flexDirection : 'row', 
     justifyContent : 'center', 
     alignItems : 'center', 
    }, 
    headerText :{ 
     fontFamily: 'Gotham-Black', 
     color: 'white', 
    }, 
    backExpandView :{ 
     backgroundColor : '#7DA137', 
     margin : 0, 
     height : '100%', 
    }, 
    mainExpandView : { 
     marginLeft : 10, 
     marginRight : 10, 
     marginBottom : 0, 
     backgroundColor : '#161617', 
     flexDirection : 'column', 
     alignItems : 'flex-start', 
    }, 
    jobTitle :{ 
     marginTop : 10, 
     paddingLeft : 10, 
     fontFamily: 'Gotham-Light', 
     fontSize : 16, 
     color: '#DE8C22', 
    }, 
    jobDescription :{ 
     marginTop : 5, 
     paddingLeft : 10, 
     fontFamily: 'Gotham-Black', 
     fontSize : 14, 
     color: 'white', 
    } 
    }); 

[[image description hier] eingeben [2]!] [2]

Es ist für mich arbeiten:

<Button onPress={() => {Alert.alert('You tapped the button!')}} 
       title="Learn More" 
       color="#841584" 
       accessibilityLabel="Learn more about this purple button" 
      /> 

es funktioniert nicht FÜR MICH:

<TouchableOpacity onPress={() => {this.spadeOptionPush}}/> 

Bitte hilf mir.

Answer 1

dies wird nicht funktionieren, weil es keine gültige jsx-Syntax ist.

müssen Sie tun entweder

<TouchableOpacity onPress={() => {this.spadeOptionPush()}}/> 

oder

<TouchableOpacity onPress={this.spadeOptionPush}}/> 

jsx Functions as Children zum Detail lesen.