Реагировать Родные концентрических кругов

Question

Я здание приложение с React Native, и мне было интересно, как бы я идти о кодировании 3 концентрические круги, как так:

Они должны были бы быть каждый будет осязаемый.

Answer 1

Существует множество способов достижения этого. Несмотря на то, что этот вопрос не является наиболее подходящим для StackOverflow, я сделал код здесь, чтобы помочь вам.

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

export default class AboutScreen extends React.Component { 
    render() { 
     return (
      <View style={styles.container}> 
       <View style={styles.circlesContainer}> 
        <TouchableOpacity style={styles.circle_1} /> 
        <TouchableOpacity style={styles.circle_2} /> 
        <TouchableOpacity style={styles.circle_3} /> 
       </View> 
      </View> 
     ) 
    } 
} 
// Base radius. 
const BASE_SIZE = 300 

const styles = StyleSheet.create({ 
    container: { 
     flex:1, 
     alignItems:'center', 
     justifyContent: 'center', 
     backgroundColor: '#E56A00' 
    }, 
    circlesContainer:{ 
     width: BASE_SIZE, 
     height: BASE_SIZE, 
     alignItems: 'center', 
    }, 
    circle_1:{ 
     top:0, 
     position: 'absolute', 
     width:BASE_SIZE, 
     height:BASE_SIZE, 
     borderRadius: BASE_SIZE/2, 
     backgroundColor: '#FF8100' 
    }, 
    circle_2:{ 
     top:BASE_SIZE*0.1, // The amount remaining 
     left:BASE_SIZE*0.1, 
     position: 'absolute', 
     width:BASE_SIZE*0.8, // 80% of the base size 
     height:BASE_SIZE*0.8, 
     borderRadius: BASE_SIZE/2, 
     backgroundColor: '#FF9D2E' 
    }, 
    circle_3:{ 
     top:BASE_SIZE*0.2, 
     left:BASE_SIZE*0.2, 
     position: 'absolute', 
     width:BASE_SIZE*0.6, 
     height:BASE_SIZE*0.6, // 60% of the base size 
     borderRadius: BASE_SIZE*0.6/2, 
     backgroundColor: '#FFFFFF' 
    }, 
}) 

В результате на мой код выглядит следующим образом:

Имейте в виду, что есть много способов, чтобы оптимизировать этот код, но, по крайней мере, это может быть хорошим началом для вас ,

Удачи вам!

Answer 2

Вы можете использовать View с рамкой Radius, окруженной другим представлением, также с borderRadius.

<View style={styles.borderExternal}> 
    <View style={styles.myCircle} /> 
</View>