如何正确设置按钮和文本的样式？答案

【问题标题】：How can i style my buttons and text properly?如何正确设置按钮和文本的样式？
【发布时间】：2023-01-12 22:13:06
【问题描述】：

我怎样才能在屏幕底部制作两个按钮并在它们之间留出一点缝隙，我怎样才能在屏幕顶部制作我的个人资料图片，在它下面制作文字，就像这张图片https://www.figma.com/file/BGDDg26x9Cl5AAOA2GGg52/Untitled?t=JCVgnCTjHVkRyhPX-0

我尝试设置样式，但除了个人资料图像和文本之外的东西被隐藏了

import { StyleSheet, Text, View, Image } from 'react-native'



const App = () => {

 

  return (
    <View style={styles.container}>
   
       <View style={styles.userSection}>
            <View style={styles.imageContainer}>
              <Image
                style={styles.image}
                source={('./img.jpg')
                resizeMode="contain"
                overflow="hidden"
              />
            </View>
            <Text style={styles.text}}>Text</Text>
          </View>
        })
      }

      <View style={styles.interacte}>
        <Text style={formbtn}>Button 1</Text>
        <Text style={formbtn}>Button 2</Text>
      </View>
    </View>
  )
}

export default App


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'black'
  },
  userSection: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 80
  },
  imageContainer: {
    width: 150,
    height: 150,
    borderRadius: 80,
    overflow: 'hidden',
    marginRight: -160,
    marginTop: -600
  },
  image: {
    width: '100%',
    height: '100%',
  },
  text: {
    color: 'white',
    fontSize: 20,
    fontWeight: 'bold',
    marginTop: -350,
  },
  interacte: {
    marginTop: 500,
    position: absolute,
  }
});

【问题讨论】：

您可以使用 css 的 spacing 和 padding 样式。 w3schools.com/csS/css_padding.asp
您是否尝试过为顶部（图像、文本）和底部（按钮）容器提供 width 和 height？
@ControlAltDel 你能用我的代码测试一下吗？与世博会

标签： javascript css react-native

【解决方案1】：

应用程序.js

import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity } from 'react-native';

const App = () => {
  return (
    <View style={{ alignItems: 'center', justifyContent: 'center' }}>
      <View style={{ marginTop: 10, marginBottom: 30 }}>
        <Image
          style={{ width: 100, height: 100, borderRadius: 20 }}
          source={{
            uri: 'https://cdn-icons-png.flaticon.com/128/919/919851.png',
          }}
        />
      </View>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Welcome to world</Text>
      <View style={{ marginTop: 300 }}>
        <TouchableOpacity
          style={{
            width: 200,
            height: 50,
            backgroundColor: '#000',
            alignItems: 'center',
            justifyContent: 'center',
            marginBottom: 10,
          }}>
          <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
            Sing In
          </Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{
            width: 200,
            height: 50,
            backgroundColor: '#000',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <Text style={{ color: 'white', fontSize: 20, fontWeight: 'bold' }}>
            Sing Up
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default App;

输出

希望这对你有帮助！！?

【讨论】：