我有两个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: {},
});
有没有一种方法,使按钮的方向端到端,而不是坚持在中心,我试图搜索答案,但在互联网上什么也没有找到,任何帮助,对此或有人能指出我做错了什么在这里
1条答案
按热度按时间rdrgkggo1#
在按钮之间添加宽度:'100%'并删除额外的视图,这是代码