React Native 使用 Flex 定位元素

2025年3月17日 | 阅读 3 分钟

在上篇文章布局和 Flexbox 中，我们讨论了 Flexbox 及其属性。在本教程中，我们将使用 Flex 设置元素的位置。

示例 1

创建一个 View 组件，并放置两个元素 TextInput 和 Button。具有 flex 属性 (1) 的 View 组件占据设备的全部空间。元素 TextInput 和 Button 设置在默认的 flex 轴上（作为列）。

import React, { Component } from "react";
import { StyleSheet, TextInput, View , Button } from "react-native";

export default class App extends Component {
    state = {
        placeName: "",
        places: []
    };

    placeNameChangedHandler = val => {
        this.setState({
            placeName: val
        });
    };

    placeSubmitHandler = () => {
        alert("button clicked")
    };

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                        placeholder="An awesome place"
                        onChangeText={this.placeNameChangedHandler}
                        style={styles.placeInput}
                />
                <Button
                        title="Button"
                        onPress={this.placeSubmitHandler}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 26,
        backgroundColor: "#fff",
        justifyContent: "flex-start"
    }
});

输出

React Native Positioning Element with Flex

示例 2

在这个例子中，我们将把 Button 放置在 TextInput 元素的右边。在父 View 中添加一个子 View 组件，其中包含 flex: 1 和 flexDirtection : "row"。为内部 View 设置 flex: 1 会占据从上到下、从左到右的整个空间。flexDirtection: "row" 将元素以行式设置在内部 View 组件中。

import React, { Component } from "react";
import { StyleSheet, View, TextInput, Button } from "react-native";

export default class App extends Component {
    state = {
        placeName: "",
        places: []
    };

    placeNameChangedHandler = val => {
        this.setState({
            placeName: val
        });
    };

    placeSubmitHandler = () => {
        alert("button clicked")
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.innerContainer}>
                    <TextInput
                            placeholder="An awesome place"
                            onChangeText={this.placeNameChangedHandler}
                    />
                    <Button
                            title="Button"
                            onPress={this.placeSubmitHandler}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 26,
        backgroundColor: "#fff",
        justifyContent: "flex-start"
    },
    innerContainer:{
        flex: 1,
        flexDirection: "row"
    }
});

输出

内部 View 的 flex: 1 占据了全部空间，这看起来不太好，因为 TextInput 和 Button 占据了从上到下的所有空间。

示例 3

在这个例子中，我们移除内部 View 的 flex 属性并添加 width: 100%。从内部 View 中移除 flex 会设置元素的默认尺寸。为内部 View 设置 width :"100%" 会占据全部宽度和元素的默认高度。

import React, { Component } from "react";
import { StyleSheet, View, TextInput, Button } from "react-native";

export default class App extends Component {
    state = {
        placeName: "",
        places: []
    };

    placeNameChangedHandler = val => {
        this.setState({
            placeName: val
        });
    };

    placeSubmitHandler = () => {
        alert("button clicked")
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.innerContainer}>
                    <TextInput
                            placeholder="An awesome place"
                            onChangeText={this.placeNameChangedHandler}
                            style={styles.textStyle}
                    />
                    <Button
                            title="Button"
                            onPress={this.placeSubmitHandler}
                    />
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 26,
        backgroundColor: "#fff",
        justifyContent: "flex-start"
    },
    innerContainer:{
       // flex: 1,
        width: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center"
    },
    textStyle:{
        width: "70%",
        backgroundColor: "gray",
    },
    buttonStyle:{
        width: "30%",
    }
});

输出

下一个主题React Native ScrollView

React Native 使用 Flex 定位元素

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

React Native 教程

指南

API

导航

存储

其他

React Native 使用 Flex 定位元素

示例 1

示例 2

示例 3

相关帖子

React Native Button

React Native TextInput

React Native View

React Native Switch

React Native Picker

React Native ListView

React Native 教程

React Native StatusBar

ActivityIndicator

第一个 App Hello World

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器