Question

我正在渲染平面列表，并且根据索引存在一些要渲染的图像。

我正在这样绘制扁平化列表的左侧：

if(index % 2 == 0){

            return {
                marginTop: -SCREEN_WIDTH/12 + -(index-2)*SCREEN_WIDTH/20,
                marginRight: SCREEN_WIDTH / 35,
                marginLeft: SCREEN_WIDTH / 35,
                margin: SCREEN_WIDTH / 50,
                width: this.width,
                height: this.height,
                opacity: this.state.opacity,
                borderRadius: SCREEN_WIDTH / 36,
            }
        }

渲染如下：

return (
            <Animated.View pointerEvents={this.state.pointer}>
                <TouchableOpacity onPress={this.captureAnimation.bind(this, item, index)} style={{backgroundColor: 'darkred'}}>
                    <AnimatedImage source={{uri: 'http://' + item.info.picture_path}} style={this.renderStyle(index)}/>
                    <View style={{position: 'absolute', bottom: SCREEN_WIDTH/20, left: SCREEN_WIDTH/24, width: '80%'}}>
                        <Text style={{fontSize: SCREEN_WIDTH / 27, color: '#ffffff',fontWeight: 'bold'}}>{item.info.title} </Text>
                        <Text style={{fontSize: SCREEN_WIDTH / 42, color: '#ffffff',fontWeight: 'bold'}}> {item.date} </Text>
                    </View>
                </TouchableOpacity>
            </Animated.View>
        );

所以我不明白为什么，可触摸的不透明度不是包装全部图像，而是包装部分图像？即使我做marginTop，touchableopacity也应该包装起来吗？谁能告诉我这是怎么回事？

Answer 1

我通过将整个数组分成2个来解决它，然后分别在左侧和右侧进行渲染。是的，现在它应该按原样包装了，但是仍然没有解释为什么在我展示的示例中它不起作用。

React-Native Touchableopacity不正确包装

1 个答案: