如何在 react-native 中将 View 组件左右对齐

Question

我正在使用 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'
     }

截图- 有人可以建议我如何优雅地处理这个问题。提前致谢。

Answer 1

希望这对你有用

  import React, { Component } from 'react';
    import { AppRegistry, View,Text } from 'react-native';

    export default class FlexDirectionBasics extends Component {
      render() {
        return (
          // Try setting `flexDirection` to `column`.
          <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{flex:1, alignItems:'center',  backgroundColor: 'steelblue'}} >
              <Text>Name</Text>
              <Text>ABC</Text>
            </View>
            <View style={{flex:1, alignItems:'center',  backgroundColor: 'red'}} >
              <Text>Name</Text>
              <Text>ABC</Text>
            </View>
          </View>
        );
      }
    };

    // skip this line if using Create React Native App
    AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);

Answer 2

替换你的Animatable视图

 <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'}}
        />
      }
    <View style={styles.viewContainer}>
        <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>
</View>   
      </Animatable.View>

还有你的 CSS

     headerCont: {
        fontWeight:'bold',
      },
      leftContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
alignItems:'flex-start'
      },
      rightContainer: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-end'
      },
viewContainer:{
 flex: 1,
       flexDirection: 'row'
},
      header: {
       backgroundColor: '#24abc1',
       padding: 5,
       marginLeft:5,
       marginRight:5,

     }