react-native - react native，如何通过另一个视图做出有限的视图？

Question

我有这个问题，我一直没能解决它，我怎样才能让视图 1 受视图 2 的限制？

我需要视图1不要离开视图2的边缘，图像在外面，它应该被视图2限制，我不知道我是否让自己理解

<View style={styles.container}>
    <View style={styles.progressBar}>
      <Animated.View style={[styles.absoluteFill, { borderRadius: 30, backgroundColor: colors.blue2, width }]} />
    </View>
    <Text style={styles.progressText}>
      {`${progress}%`}
     </Text>
  </View>
  
  const styles = StyleSheet.create({
    absoluteFill: {
        position: 'absolute',
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        
    },
    progressText: {
        position: 'absolute',
        color: colors.white,
        fontFamily: "OpenSans-Regular"

    },
    container: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        height: 30,
        borderRadius: 30,
        
    },
    progressBar: {
        //alignSelf: 'baseline',
        height: 30,
        width: '100%',
        backgroundColor: colors.blue3,
        borderRadius: 30
    }
})

谢谢你

标签： react-native

Answer 1

您需要在您的 progressBar 样式中添加overflow: 。hidden

progressBar: {
      height: 30,
      width: '100%',
      overflow: 'hidden',
      backgroundColor: colors.blue3,
      borderRadius: 30
  }

我为你做了这个现场演示： https ://codesandbox.io/s/vibrant-fermi-49ztl?file=/src/App.js