react-native - 如何在 React Native 中使用 TouchableNativeFeedback 制作下图所示的样式？

Question

我附上了两张图片，一张显示当前视图，另一张显示我想要的视图。

您可以在上面的图片中看到，在第一张图片中，突出显示的区域是一个矩形，而在第二张图片中，它是一个圆角矩形。我想实现第二种风格，但我做不到。

高亮区域其实是 React Native 中 TouchableNativeFeedback 组件的结果

请指导我实现这一目标

下面提到了代码片段：-

<View style={styles.chatDetailsScreenActionBar}>
   <View style={styles.chatDetailsScreenBackButtonView}>
       <TouchableNativeFeedback>
           <View style={styles.chatDetailsScreenBackButton}>
               <MaterialIcons name="arrow-back" size={30} color="white" />
               <Image source={{ uri: this.state.selectedChat.chat_thumbnail }} 
                          style={styles.chatDetailsScreenBackButtonImage} />
           </View>
       </TouchableNativeFeedback>
   </View>
</View>

上述布局的样式代码：-

chatDetailsScreenActionBar: {
        height: 70,
        backgroundColor: '#006156',
        justifyContent: 'center',
        paddingHorizontal: 10
    },
    chatDetailsScreenBackButtonView: {
        height: 55,
        width: 70,
        borderRadius: 24
    },
    chatDetailsScreenBackButton: {
        flexDirection: 'row',
        alignItems: 'center',
        height: "100%"
    },
    chatDetailsScreenBackButtonImage: {
        height: 36,
        width: 36,
        borderRadius: 18
    }

Answer 1

尝试这个 ： <TouchableNativeFeedback style={styles.TNF} > '...your code' </TouchableNativeFeedback>

TNF:{ width: ... , height: ... , backgroundColor:'#...' , borderRadius:50}

Answer 2

尝试给“TouchableNativeFeedback”组件样式 {borderRadius:1000}