-1
私のプロジェクトでは、アコーディオンを展開と折りたたみに使用しています。そのうまく動作します。私は1つのTouchableOpacityを設定しましたが、そのイベントは機能しません。Accordion - TouchableOpacityを表示しないで表示されない
[2]
をITが私のために働いている[2] [[ここに画像の説明を入力]！]
/**
* 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',
}
});
、コードを参照してください：
<Button onPress={() => {Alert.alert('You tapped the button!')}}
title="Learn More"
color="#841584"
accessibilityLabel="Learn more about this purple button"
/>
ITが動作しませんFOR ME：
<TouchableOpacity onPress={() => {this.spadeOptionPush}}/>
助けてください。
博覧会のリンクは正しいですか？そこには触れることはできません。 – digit
@digit、私は博覧会リンクを更新する –
@digit now codeを更新してください。 –