This is the result that I hope. enter image description here
Here's my code
import React from 'react';
import {View, Text, SafeAreaView, Button, StyleSheet} from 'react-native';
import { useNavigation } from '@react-navigation/native';
const HomeScreen = (props) => {
const navigation = useNavigation();
return (
<SafeAreaView style={{flex: 1}}>
<View style={{flex: 1, padding: 100}}>
<View>
<View style={styles.container}>
<Button
style={styles.button}
title="aw"
onPress={() => navigation.navigate('cameraScreenStack')}
/>
<Button
style={styles.button}
title="bdsfw"
onPress={() => navigation.navigate('ledgerScreenStack')}
/>
</View>
<View style={styles.container}>
<Button
style={styles.button}
title="cwd"
onPress={() => navigation.navigate('recommendScreenStack')}
/>
<Button
style={styles.button}
title="ddfa"
onPress={() => navigation.navigate('settingScreenStack')}
/>
</View>
</View>
</View>
</SafeAreaView>
);
};
export default HomeScreen;
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
button: {
}
});
This picture is what it look likes right now. enter image description here
I want to make buttons bigger, padding between buttons, and unify button size. How can I fix my code?
ive added a demo below, basically in place of button you have to use touchableOpacity
import * as React from "react";
import {
Text,
View,
StyleSheet,
Animated,
ImageBackground,
TouchableOpacity
} from "react-native";
const App = () => {
const [sel,setSel] = React.useState(1);
const onPress = (item) => setSel(item)
const renderEachButton = (item) => {
return(
<TouchableOpacity onPress={() =>onPress(item)} style={[styles.buttonStyles,{backgroundColor:item===sel?'gray':null}]}>
<Text>Button{item}</Text>
</TouchableOpacity>
)
}
const data = [1,2,3,4]
return (
<View style={{ flex: 1 ,flexDirection:'row',flexWrap:'wrap',paddingHorizontal:10,justifyContent:'space-between'}}>
{data.map((item,index) => renderEachButton(item))}
</View>
);
};
const styles = StyleSheet.create({
buttonStyles: {
paddingHorizontal: 40,
paddingVertical: 30,
borderWidth: 1,
marginVertical:10,
marginHorizontal:5,
alignItems:'center',
justifyContent:'center',
borderRadius:5
}
});
export default App;
Letme know in case of any doubts
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.