React Native组件位置

i34xakig  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(55)

我在react native中创建了一个按钮组件。它位于屏幕的顶部,但我想将其设置在屏幕的末尾。

<View style={{ marginHorizontal: 52, marginBottom: 23,   }}>
                <TouchableOpacity style={{ backgroundColor: '#5669FF', height: 58, borderRadius: 15, justifyContent: 'center', alignItems: 'center', shadowColor: '#000000', elevation: 1, shadowOpacity: 1, }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ color: '#fff', fontSize: 18, fontWeight: '400', letterSpacing: 1, textTransform: 'uppercase' }}>Explore Events</Text>
                        <View style={{ height: 30, width: 30, backgroundColor: '#3D56F0', borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginLeft: 22 }}>
                            <Image
                                style={{ height: 18, width: 18, }}
                                source={require("../Assets/Icons/RightArrow.png")}
                            />
                        </View>
                    </View>
                </TouchableOpacity>
            </View>

字符串


的数据
我想把这个按钮组件水平地设置在屏幕中心的末端。

eqoofvh9

eqoofvh91#

您需要将其 Package 在样式为{flex: 1, justifyContent: 'flex-end',}的容器中

<View style={{flex: 1, justifyContent: 'flex-end'}}>
      <View style={{ marginHorizontal: 52, marginBottom: 23}}>
                <TouchableOpacity style={{ backgroundColor: '#5669FF', height: 58, borderRadius: 15, justifyContent: 'center', alignItems: 'center', shadowColor: '#000000', elevation: 1, shadowOpacity: 1, }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }}>
                        <Text style={{ color: '#fff', fontSize: 18, fontWeight: '400', letterSpacing: 1, textTransform: 'uppercase' }}>Explore Events</Text>
                        <View style={{ height: 30, width: 30, backgroundColor: '#3D56F0', borderRadius: 15, justifyContent: 'center', alignItems: 'center', marginLeft: 22 }}>
                            
                        </View>
                    </View>
                </TouchableOpacity>
            </View>
</View>

字符串

相关问题