我想用原生按钮制作一个圆圈

Question

我正在开发一个 react native 项目，我想用按钮创建一个圆形。

图片

有一个中央按钮，其他按钮必须像图片中那样呈圆形。

Answer 1

最后结果：

您可以这样做：

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default function App() {
  const handleClick = (num) => {
    alert(`${num} clicked`);
  };
  return (
    <View style={styles.container}>
    <View style={styles.btnContainer}>
      <View style={styles.btnContainerMiddle}>
        <TouchableOpacity
          onPress={() => handleClick(1)}
          style={[
            styles.button,
            { position: 'absolute', left: -100, top: 50 },
          ]}>
          <Text>1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(2)}
          style={[styles.button]}>
          <Text>2</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(3)}
          style={[styles.button, { position: 'absolute', left: 100, top: 50 }]}>
          <Text>3</Text>
        </TouchableOpacity>
      </View>
      <View style={[styles.btnContainerMiddle, { justifyContent: 'center' }]}>
        <TouchableOpacity
          onPress={() => handleClick(4)}
          style={[
            styles.button,
            { height: 100, width: 100, borderRadius: 50, margin: 10 },
          ]}>
          <Text>4</Text>
        </TouchableOpacity>
      </View>
      <View style={styles.btnContainerMiddle}>
        <TouchableOpacity
          onPress={() => handleClick(5)}
          style={[
            styles.button,
            { position: 'absolute', left: -100, bottom: 60 },
          ]}>
          <Text>5</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(6)}
          style={[styles.button]}>
          <Text>6</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => handleClick(7)}
          style={[
            styles.button,
            { position: 'absolute', right: -100, bottom: 60 },
          ]}>
          <Text>7</Text>
        </TouchableOpacity>
      </View>
    </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  },
  btnContainer: {
    // flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: 'grey',
    padding: 8,
    width: 400,
    height: 400,
    borderRadius: 100,
    alignItems: 'center',
  },
  btnContainerMiddle: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  button: {
    margin: 10,
    width: 70,
    height: 70,
    backgroundColor: 'white',
    borderRadius: 35,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

这是该应用程序的实时演示，您可以使用它进行进一步调整。

Answer 2

这是创建圆形按钮的示例代码

<TouchableOpacity 
  style={{ borderWidth:1,
    borderColor:'rgba(0,0,0,0.2)',
    alignItems:'center',
    justifyContent:'center',
    width:100,
    height:100,
    backgroundColor:'#fff',
    borderRadius:100,
  }}
  >
  <Icon name={"chevron-right"}
    size={30}
    color="#01a699" />
</TouchableOpacity>

Answer 3

您可以使用 TouchableOpacity 创建自定义按钮。 这里和例子

  <TouchableOpacity
    style={{borderColor:"red",width:50,backgroundColor:"red",borderRadius:100}}
    onPress={onPress}
  >
    <Text>Press Here</Text>
  </TouchableOpacity>

您可以调整宽度和 borderRadius 以获得适当的圆