alignSelf不对布局“ React native”进行任何更改

Question

该组件的JSX表达式如下

<ImageBackground source={require('../images/background.jpg')} 
      style={styles.container}>        
        <View style={styles.container}>
            <View style={styles.viewStyleOne}>
                <Text style={styles.textStyle}> 1 </Text>
            </View>

            <View style={styles.viewStyleTwo}>
                <Text style={styles.textStyle}> 2 </Text>
            </View>

            <View style={styles.viewStyleThree}>
                <Text style={styles.textStyle}> 3 </Text>
            </View>
        </View>
</ImageBackground>

样式

const styles = StyleSheet.create({
container:{
    flex: 1,
    flexDirection:'row',
    alignItems:'center', 
    justifyContent: 'center'
},
viewStyleTwo : {
    width:100,
    height:40,
    justifyContent : 'center',
    alignItems:'center', 
    backgroundColor: '#4DF25F'
},
viewStyleOne :{
    width:40,
    height:40,
    justifyContent : 'center',
    alignItems:'center', 
    backgroundColor: '#B54BF1',
    alignSelf : 'flex-start'
},
viewStyleThree:{
    width:40,
    height:40,
    justifyContent : 'center',
    alignItems:'center', 
    backgroundColor: '#F3B54E'
},
textStyle:{
    textAlign:'center'
}});

viewStyleOne类包含一个属性alignSelf，但没有进行任何更改，它应该在屏幕顶部

预期输出应如屏幕截图所示

Answer 1

您可以尝试以下方法吗

const styles = StyleSheet.create({
    container:{
        flex: 1,
        top: 0, 
        // Option 01
        height: "100%", // Added
        // OR  // Option 02
        // bottom: 0,
        // left: 0,
        // right : 0,
        // position: 'absolute',
        flexDirection:'row',
        alignItems:'center', 
        justifyContent: 'center',
        backgroundColor: 'green'
    },
    viewStyleTwo : {
        width:40,
        height:40,
        justifyContent : 'center',
        alignItems:'center', 
        backgroundColor: '#4DF25F'
    },
    viewStyleOne :{
        width:40,
        height:40,
        justifyContent : 'center',
        alignItems:'center', 
        backgroundColor: '#B54BF1',
        alignSelf : 'flex-start'
    },
    viewStyleThree:{
        width:40,
        height:40,
        justifyContent : 'center',
        alignItems:'center', 
        backgroundColor: '#F3B54E'
    },
    textStyle:{
        textAlign:'center'
    }});

Data.Aeson.Lens.members