как разместить предметы по кругу в React Native

Question

Я разрабатываю что-то похожее на это

У меня есть много способов добиться этого, используя css и S css, но я не смог найти ничего для реакции Родной, если у кого-то есть идеи, как это сделать. Их помощь будет высоко ценится. Спасибо.

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;

Надеюсь, это поможет!