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

您可以使用带有borderRadius的视图，由另一个视图包围，也可以使用borderRadius。

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

反应原生同心圆

2 个答案: