Question

在我的应用程序中，我想将组件（searchBar）对齐到屏幕的右上角。 mainWrapper有flexDirection RIGHT，所以我尝试使用justifyContent：＆＃34; flex-end＆＃34;。但它没有用。我在这里做错了什么？

import React from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";

import { DefaultButton , ClickableIcon} from "../../mixing/UI";
import { Search } from "../../config/images";

const width = Dimensions.get("window").width;

const chooseWorkoutHeader = props => (
  <View style={styles.mainWrapper}>

    <View style={styles.buttonWrapper}>
      <DefaultButton
        buttonText={styles.buttonText}
        width={width * 0.3}
        backgroundColor="white"
        onPress={() => props.onClickPlaylists}>

        Playlists
      </DefaultButton>

      <DefaultButton
        buttonText={styles.buttonText}
        width={width * 0.3}
        backgroundColor="white"
        onPress={() => props.onClickSortBy}>

        Sort By
      </DefaultButton>
    </View>

    {/* <View style={styles.searchBar}> */}
      <ClickableIcon
        source={Search}
        height={35}
        width={35}
        style={styles.searchBar}
        // onIconPressed={() => {
        //   navigation.navigate("mainfeed");
        // }}
      />
    {/* </View> */}
</View>
);

const styles = StyleSheet.create({
  mainWrapper: {
    borderWidth: 3,
    flexDirection: "row",
    padding: 10,  
    width: width,
    backgroundColor: "white"
  },
  buttonWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: width * 0.62
  },
  buttonText: {
    fontSize: 18,
    textAlign: "center",
    color: "gray"
  },
  searchBar: {
    borderWidth: 1,
    padding: 1,
    justifyContent: 'flex-end'
  }
});

export default chooseWorkoutHeader;

我也尝试过alignSelf。但它们都没有奏效。如何将具有样式的ClickableIcon移动为＆＃34; searchBar＆＃34;屏幕右侧？

Answer 1

您是否尝试将此添加到“mainWrapper”：

显示：“flex”

据我所知，当你也设置了显示属性

时，“flex”只能运行

Answer 2

您可以通过flex: 1 buttonWrapper

来实现此目的

buttonWrapper: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: width * 0.62,
    flex: 1,  // Add this line
  }

mainWrapper（buttonWrapper和ClickableIcon内有两个组件。 flex: 1将使用buttonWrapper展开最大值，并为ClickableIcon留出空间。

将组分对齐以反应原生

2 个答案: