我正在使用 react-native 构建一个跨平台的移动应用程序。我正在实现一个在 Accordion 中显示数据的功能。我希望数据在 Accordion Header 和 Accordion Body 中左右对齐，但我无法实现。
这是我的代码-
import React, { Component } from 'react';
import {
Switch,
ScrollView,
StyleSheet,
Text,
Image,
View,
TouchableOpacity,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Collapsible from 'react-native-collapsible';
import Accordion from 'react-native-collapsible/Accordion';
const axios = require('axios');
import moment from 'moment'
import Dialog, { SlideAnimation, DialogContent } from 'react-native-popup-dialog';
export default class AccordionScreen extends Component {
constructor (){
super();
this.state = {
activeSections: [],
collapsed: true,
multipleSelect: false,
newData:[],
visible: false
};
}
componentDidMount(){
this.fetchData();
}
fetchData() {
axios({
method: "POST",
url: "URL",
headers: {
"Content-Type": "application/json",
"Authorization": this.props.navigation.getParam('authorizationToken', undefined)
},
data: {}
})
.then (response => {
if (response.status === 200 ){
if (response.data.newData.length > 0 ){
this.setState({
newData: response.data.newData
});
//console.log(activeSections);
}
else {
return <h1>No Data!</h1>
}
}
else{
throw "Request resulted in NOT 200";
}
})
.catch(error => {
console.log(error);
});
}
_renderSectionTitle = section => {
return (
<View style={styles.titleHeader}>
<Text>{moment(section.eventDate).format('ll')}</Text>
</View>
);
};
toggleExpanded = () => {
this.setState({ collapsed: !this.state.collapsed });
};
setSections = sections => {
this.setState({
activeSections: sections.includes(undefined) ? [] : sections,
});
};
_renderHeader(section, index, isActive, sections) {
return (
<Animatable.View
duration={400}
style={[styles.header, isActive ? styles.active : styles.inactive]}
transition="backgroundColor">
{
isActive ?
<Image source={require('../assets/images/upArrow.png')}
style={{width: 15, height: 15, alignSelf: 'flex-end'}}
/>
:
<Image source={require('../assets/images/downArrow.png')}
style={{width: 15, height: 15 , alignSelf: 'flex-end'}}
/>
}
<Animatable.View style={styles.leftContainer}>
<Animatable.Text style={styles.headerCont}>Name </Animatable.Text>
<Animatable.Text>{section.name} </Animatable.Text>
</Animatable.View>
<Animatable.View style={styles.rightContainer} >
<Animatable.Text style={styles.headerCont}>City</Animatable.Text>
<Animatable.Text>{section.firstName} {section.lastName} </Animatable.Text>
</Animatable.View>
</Animatable.View>
);
}
_renderContent(section, i, isActive, sections) {
return (
<Animatable.View
duration={300}
transition="backgroundColor"
style={[styles.accordionCont, isActive ? styles.active : styles.inactive]}
transition="backgroundColor"
>
<Animatable.Text
style={styles.headerCont}
duration={300}
easing="ease-out"
animation={isActive ? 'zoomIn' : false}>
Insurer Address
</Animatable.Text>
<Animatable.Text
duration={300}
easing="ease-out"
animation={isActive ? 'zoomIn' : false}>
{section.addressStreet}
</Animatable.Text>
<Animatable.Text
style={styles.headerCont}
duration={300}
easing="ease-out"
animation={isActive ? 'zoomIn' : false}>
Policy Number
</Animatable.Text>
<Animatable.Text
duration={300}
easing="ease-out"
animation={isActive ? 'zoomIn' : false}>
{section.policyNumber}
</Animatable.Text>
<Animatable.Text
style={styles.headerCont}
duration={300}
easing="ease-out"
animation={isActive ? 'zoomIn' : false}>
Additional Details
</Animatable.Text>
</Animatable.View>
);
}
_updateSections = activeSections => {
this.setState({ activeSections });
};
render() {
const { multipleSelect, activeSections, poiHistoryData } = this.state;
return (
<View style={styles.container}>
<ScrollView contentContainerStyle={{ paddingTop: 30 }}>
<TouchableOpacity onPress={this.toggleExpanded}>
<View style={styles.header}>
<Text style={styles.headerText}>View Data</Text>
</View>
</TouchableOpacity>
<Accordion
sections={newData}
activeSections={activeSections}
touchableComponent={TouchableOpacity}
expandMultiple={multipleSelect}
renderSectionTitle={this._renderSectionTitle}
renderHeader={this._renderHeader}
renderContent={this._renderContent}
duration={400}
onChange={this._updateSections}
/>
</ScrollView>
</View>
) }
}
如果您看到标题“名称”和“城市”，这些是标题，我将在其下方显示值。但是现在所有东西都被堆叠并对齐到左边。我希望“其他保险公司”及其值显示在屏幕左侧，“其他被保险人”及其值显示在屏幕右侧。
我正在使用的 CSS -
headerCont: {
fontWeight:'bold'
},
leftContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start'
},
rightContainer: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-end',
alignItems: 'center'
},
header: {
backgroundColor: '#24abc1',
padding: 5,
marginLeft:5,
marginRight:5,
flex: 1,
flexDirection: 'row'
}
截图
- 有人可以建议我如何优雅地处理这个问题。提前致谢。