阵营本地同心圆

Question

我建立与之反应原住民的应用程序，我想知道我怎么会去约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

您可以使用具有borderRadius的视图，由另一个视图环绕，也可以使用borderRadius。

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