陣營本地同心圓

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>