如何在 React Native 中将项目放置在圆圈上

Question

我正在开发类似的东西

我有很多方法可以使用 css 和 Scss 来实现此目的，但我找不到任何用于 React Native 的内容，如果有人知道如何做到这一点。非常感谢他们的帮助。谢谢。

Answer 1

使用 cos 和 sin 函数放置图像

工作示例：https://snack.expo.io/@msbot01/trusting-bagel

import React, { Component } from 'react';
import { Text, View, StyleSheet, ScrollView, FlatList, Image } from 'react-native';
import Constants from 'expo-constants';
import Highlighter from 'react-native-highlight-words';

const size = 200 ;
const symbolSize = 16;


  const radius = size / 2;
  const center = radius;


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      higightedTexts:''
    }
  }

  componentDidMount(){
      this.setupA(); 
      this.setupB();
      this.setupC();
      this.setupD();
  }

  degToRad(deg) {
  return deg * Math.PI / 180;
}

setupA(){
  const angleRad = this.degToRad(0);
      const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
      const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
      this.setState({
        x:  x,
        y: y
      })
}

setupB(){
  const angleRad = this.degToRad(90);
      const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
      const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
      this.setState({
        x2:  x,
        y2: y
      })
}

setupC(){
  const angleRad = this.degToRad(180);
      const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
      const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
      this.setState({
        x3:  x,
        y3: y
      })
}

setupD(){
  const angleRad = this.degToRad(270);
      const x = radius * Math.cos(angleRad) + center - symbolSize / 2;
      const y = radius * Math.sin(angleRad) + center - symbolSize / 2;
      this.setState({
        x4:  x,
        y4: y
      })
}






  render() {
    return (
      <View style={{ flex: 1, justifyContent:'center', alignItems:'center' }}>
        <View
      style={[{backgroundColor:'red',
        width: size,
        height: size,
        borderRadius: size / 2,
      }]}
    >
       <Image
        style={{width: 40,
            height: 40,
            borderRadius:20,
            left: this.state.x-20,
            top: this.state.y ,
            position:'absolute'}}
        source={{
          uri:
            'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
        }}
      />

       <Image
        style={{width: 40,
            height: 40,
            borderRadius: 20,
            left: this.state.x2,
            top: this.state.y2-20 ,
            position:'absolute'}}
        source={{
          uri:
            'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
        }}
      />



       <Image
        style={{width: 40,
            height: 40,
            borderRadius: 20,
            left: this.state.x3,
            top: this.state.y3 ,
            position:'absolute'}}
        source={{
          uri:
            'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
        }}
      />

      <Image
        style={{width: 40,
            height: 40,
            borderRadius: 20,
            left: this.state.x4-10,
            top: this.state.y4,
            position:'absolute'}}
        source={{
          uri:
            'https://icons.iconarchive.com/icons/graphicloads/100-flat/256/home-icon.png',
        }}
      />

    </View>
      </View>
    );
  }
} 

const styles = StyleSheet.create({});

Answer 2

React Native 没有任何特殊的库，你可以使用 CSS 来做到这一点：

你可以这样做：

import { Dimensions, View, Image } from 'react-native';
import React, { Component } from 'react';
class App extends Component{
render(){
    return(
        <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>

     <View
        style = {{
          borderRadius: Math.round(Dimensions.get('window').width + Dimensions.get('window').height) / 2,
          width: Dimensions.get('window').width * 0.8,
          height: Dimensions.get('window').width * 0.8,
          borderWidth:5,
          borderColor:"red",
          justifyContent: 'center',
          alignItems: 'center'
        }}
        underlayColor = '#ccc'
      >
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.7}} />
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,right: 20}} />
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.6,left: 20}} />
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.7}} />
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,right: 20}} />
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",top:Dimensions.get('window').width * 0.6,left: 20}} />
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,left:-20}} />
               <Image source={require('./assets/main.jpg')} style={{height:50,width:50,position:"absolute",bottom:Dimensions.get('window').width * 0.3,right:-20}} />
      </View>
        </View>

    )
}
}
export default App;

希望这有帮助！

Answer 3

虽然我晚了 4 年，但我创建了一个库来实现这一目标。它还支持旋转和各种动画：react-native-circular-layout。