Bir görünümü başka bir görünümün içine nasıl yansıtırsınız?

Question

Bir görünümü React Native'de bir diğerinin içine ortalamak istiyorum.

Bu

benim kodudur:

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'yellow', 
    }, 
    outerCircle: { 
    backgroundColor: 'blue', 
    width: 100, 
    height: 100, 
    borderRadius: 100/2, 
    }, 
    innerCircle: { 
    backgroundColor: 'red', 
    width: 80, 
    height: 80, 
    borderRadius: 80/2, 
    } 
}); 

export default class RecorderButton extends React.Component { 

    _buttonPressAction() { 
    Alert.alert("button pressed"); 
    } 

    render() { 
    return (
     <TouchableOpacity activeOpacity={0.4} 
         onPress={this._buttonPressAction} 
         style={styles.container}> 
     <View style={styles.outerCircle}> 
      <View style={styles.innerCircle} /> 
     </View> 
     </TouchableOpacity> 
    ); 
    } 
} 

Ve bu nasıl göründüğünü: Ben konsantrik mavi ve kırmızı halkalar var istiyorum

. Bunu nasıl başarabilirim?

Answer 1

Zaten kapsayıcıyı ortalıyorsunuz. DışCircle için de aynısını izleyin.

outerCircle: { 
    backgroundColor: 'blue', 
    width: 100, 
    height: 100, 
    borderRadius: 100/2, 
    justifyContent: 'center', 
    alignItems: 'center' 
    },