显示Flex开始和结束React本地

epfja78i  于 2023-03-09  发布在  React
关注(0)|答案(1)|浏览(79)

我有两个button组件,我尝试使用flexDirection将displaydirection设置为Row,下面是我的尝试和它的外观:

import React from 'react';
import {
  Animated,
  View,
  Text,
  Pressable,
  StyleSheet,
  Dimensions,
} from 'react-native';
import {IconClosedX} from '../../assets';
import {Button} from 'react-native-paper';
import {useCardAnimation} from '@react-navigation/stack';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
const {width, height} = Dimensions.get('window');
const ModalsCC = ({navigation}) => {
  return (
    <View
      style={{
        flex: 1,

        marginTop: 300,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ffff',
        borderRadius: 10,
      }}>
      <View
        style={{
          marginTop: 10,
        }}>
        <Text
          style={{
            fontSize: 20,
            fontWeight: 'bold',
            textTransform: 'capitalize',
          }}>
          Edit Keterangan
        </Text>
      </View>
      <View
        style={{
          position: 'absolute',
          top: 20,
          right: 20,
        }}>
        <TouchableOpacity onPress={navigation.goBack}>
          <IconClosedX />
        </TouchableOpacity>
      </View>
      <View style={Styles.viewContainer}>
        <ScrollView>
          <View>
            <Text>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of
              Lorem Ipsum.
            </Text>
            <Text>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of
              Lorem Ipsum.
            </Text>
            <Text>
              Lorem Ipsum is simply dummy text of the printing and typesetting
              industry. Lorem Ipsum has been the industry's standard dummy text
              ever since the 1500s, when an unknown printer took a galley of
              type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into
              electronic typesetting, remaining essentially unchanged. It was
              popularised in the 1960s with the release of Letraset sheets
              containing Lorem Ipsum passages, and more recently with desktop
              publishing software like Aldus PageMaker including versions of
              Lorem Ipsum.
            </Text>
          </View>
        </ScrollView>
      </View>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'space-between',
          backgroundColor: 'white',
        }}>
        <Button
          style={{margin: 10}}
          mode="contained"
          buttonColor="red"
          onPress={() => {
            navigation.goBack();
            console.log('test');
          }}>
          Close Modal
        </Button>

        <View>
          <Button
            style={{margin: 10}}
            mode="contained"
            onPress={() => {
              navigation.goBack();
              console.log('test');
            }}>
            Cancel Edit
          </Button>
        </View>
      </View>
    </View>
  );
};

export default ModalsCC;

const Styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    padding: 10,
    paddingTop: 0,
    paddingBottom: 0,
    marginTop: 20,
    height: height * 1.2,
    backgroundColor: '#E5E5E5',
  },
  viewAnimated: {
    width: '100%',
  },
  closeButton: {},
  text: {},
});

有没有一种方法,使按钮的方向端到端,而不是坚持在中心,我试图搜索答案,但在互联网上什么也没有找到,任何帮助,对此或有人能指出我做错了什么在这里

rdrgkggo

rdrgkggo1#

在按钮之间添加宽度:'100%'并删除额外的视图,这是代码

<View
    style={{
      flexDirection: 'row',
      justifyContent: 'space-between',
      backgroundColor: 'white',
      width:'100%'
    }}>
    <Button
      style={{ margin: 10 }}
      mode="contained"
      buttonColor="red"
      onPress={() => {
        navigation.goBack();
        console.log('test');
      }}>
      Close Modal
    </Button>

    <Button
      style={{ margin: 10 }}
      mode="contained"
      onPress={() => {
        navigation.goBack();
        console.log('test');
      }}>
      Cancel Edit
    </Button>
  </View>

相关问题