使用布局嵌套React Native Content Messes

Question

我正在构建一个react native应用程序，我必须创建一个自定义按钮组件。

当我对我的界面进行原型设计时，我的所有按钮都只是<View>。当我完成新组件的制作后，我只是将<View>标记替换为我的组件<SOCButton>的名称。这样做之后，按钮内部的内容布局就完全混乱了。

这是使用<View>组件的外观：

以下是我的自定义组件的外观：

这是我的组件的代码：

    <TouchableWithoutFeedback onPressIn={this.depressed.bind(this)} onPressOut={this.unpressed.bind(this)}>
      <Animated.View style={[pressedStyle,{flex:1}]}>
        {this.props.children}
      </Animated.View>
    </TouchableWithoutFeedback>

以下是使用它的地方：

            <View style={styles.RecentPOV}>
              <View style={styles.RecentPOVProfilePicContainer}>
                <Image style={styles.RecentPOVProfilePic} source={{uri:'https://pbs.twimg.com/profile_images/824476541384097793/qGw1Whej.jpg'}}/>
                <Text style={styles.RecentPOVUserRating}>4.0</Text>
              </View>
              <View style={styles.RecentPOVInfoContainer}>
                <Text style={styles.RecentPOVUser}>Jack Kalina</Text>
                <View style={styles.RecentPOVStars}>
                    <View style={styles.FullStarsContainer}>
                      <Image style={styles.FullStars} source={StarShape.Full}/>
                      <View style={StarMaskStyle.RecentPOVStarMask}></View>
                    </View>
                    <Image style={styles.EmptyStars} source={StarShape.Empty}/>
                </View>
                <Text style={styles.RecentPOVTimestamp}>February 2nd, 12:14 PM</Text>
              </View>
            </View>

相关的造型：

RecentPOV: {
backgroundColor: '#e8e8e8',
width: '100%',
height: null,
marginVertical: 15,
borderRadius: 20,
padding: 15,
flexDirection:'row'
},
RecentPOVProfilePic: {
height: 100,
width: 100,
borderRadius: 10
},
RecentPOVProfilePicContainer: {
alignItems: 'flex-end'
},
RecentPOVInfoContainer: {
marginLeft: 20
},
RecentPOVUserRating: {
position:'absolute',
fontSize:30,
fontWeight: '900',
color: 'white',
top:62,
right:4,
textAlign:'right',
flex: 1
},
RecentPOVStars: {
flex: 1,
top: -33,
width: '110%'
},
RecentPOVUser: {
flex: 1,
color: '#2b2b2b',
fontSize: 20,
fontWeight: 'bold'
},
RecentPOVTimestamp: {
flex: 1,
top: 15,
color: '#636363',
fontSize:15
}