React Native图像和其他组件不尊重边界（如填充）

Question

我最近开始使用React-Native，我一直在努力解决的主要问题之一是布局设计。

我有一张＆＃34;卡＆＃34;像保存有关电影的一些信息的组件。图像和文本等大部分组件超出了卡的范围，并且不考虑提供的填充和边距。

这是JSX代码：

            <View style={[styles.container, styles.card]}>
            <View style={{alignSelf: 'stretch', flexDirection: 'row', padding: 10}}>
                <Image style={{height: 50, width: 50, borderRadius: 25}}
                       source={require('../../img/sarah-avatar.png.jpeg')}/>

                <View style={{flexDirection: 'column', marginTop: 5, marginLeft: 15}}>
                    <Text style={styles.title}>{ this.state.movie.name }</Text>
                    <Text style={{color: 'gray'}}>{ moment(this.state.movie.releaseDate).format('DD/MM/YYYY') }</Text>
                </View>
            </View>

            <View style={{alignItems: 'center'}}>
                <!-- THIS IMAGE DOES NOT RESPECT THE CARD BOUNDS -->
                <Image style={{height: 220, resizeMode: 'center'}}
                       source={require('../../img/advance-card-bttf.png')}/>

                <View style={{flexWrap: 'wrap', marginTop: 10, marginBottom: 20}}>

                    <Text style={{color: 'gray', fontSize: 14}}>
                        { this.state.movie.summary }
                    </Text>
                </View>
            </View>

            <View style={{flexDirection: 'row', flex: 1}}>
                <Button onPress={this.onLikeClick.bind(this)}>
                    <View style={{flexDirection: 'row'}}>
                        <Icon name="thumbs-up" size={18} color="#007aff" />
                        <Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.likes } Likes</Text>
                    </View>
                </Button>

                <View style={{width: 20}} />

                <Button onPress={this.onCommentClick.bind(this)}>
                    <View style={{flexDirection: 'row'}}>
                        <Icon name="comment" size={18} color="#007aff" />
                        <Text style={{color: '#007aff', marginLeft: 5}}>{ this.state.movie.comments.length } Comments</Text>
                    </View>
                </Button>
            </View>

            <Comments comments={this.state.movie.comments }
                      showComments={ this.state.showComments }
                      handler={this.handler} />
        </View>

const styles = StyleSheet.create({
    card: {
        backgroundColor: "#fff",
        borderRadius: 2,
        shadowColor: "#000000",
        shadowOpacity: 0.3,
        shadowRadius: 1,
        shadowOffset: {
            height: 1,
            width: 0.3,
        },
        padding: 10,
        flexWrap: 'wrap'
    },
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        margin: 5
    },
    title: {
        fontSize: 20,
        backgroundColor: 'transparent'
    },
    button: {
        marginRight: 10
    }
});

评论组件JSX代码：

            <View style={{flexDirection: 'column'}}>
            {
                this.props.comments.map((comment, index) => {
                    return (
                        <View key={index} style={{flexDirection: 'row', marginTop: 20}}>
                            <Image style={{height: 50, width: 50, borderRadius: 25}}
                                   source={require('../../img/avatar-ts-woody.png')}/>

                            <View style={{flexDirection: 'column', marginLeft: 15, marginTop: 3}}>
                                <Text style={{fontSize: 18}}>{ comment.name }</Text>
                                <!-- THE COMMENT CONTENT GOES OUTSIDE OF THE CARD -->
                                <Text style={{color: 'gray'}}>{ comment.content }</Text>
                            </View>
                        </View>
                    )
                })
            }

            <TextInput placeholder="Leave a comment"
                       value={this.state.commentContent}
                       onChangeText={(text) => this.setState({commentContent : text})}
                       onSubmitEditing={this.onCommentEntered.bind(this)}
                       style={{height: 40, marginTop: 18}} />
        </View>

在这里你可以看到封面图片看起来像卡片一样：

在这里，每条评论可能会在卡内正确开始，但是当文字太长时，它会超出界限：