时间戳

首页 > 解决方案 > 当我使用 flexDirection:"row" 时，如何根据需要放置视图和图标？

react-native - 当我使用 flexDirection:"row" 时，如何根据需要放置视图和图标？

问题描述

在此处输入图像描述

在照片中清楚地看到“8 个任务”和“事件”的文本不是从同一行开始，即使我使用了“+”图标也不会在同一行结束我justify-content:"space-between" 如何才能像我想要的那样实现这一点见过？

我的错误是什么？

这是App.js，提前感谢您的帮助

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView } from 'react-native';
import Application from "./src/components/icons/application.svg"
import HorizontalCircles from './src/components/HorizontalCircles';
import HorizontalDiscussion from './src/components/HorizontalDiscussion';
import Energy from "./src/components/icons/energy.svg"
import Add from "./src/components/icons/add.svg"
import Calendar from "./src/components/icons/calendar.svg"
    
const App = () => {

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.appIcon}>
        <Application height={30} width={22} fill={"#1E2439"} />
        <View style={{ height: 30, width: 30, backgroundColor: "#DBF1F9", borderRadius: 20 }} />
      </View>
      <TextInput style={styles.input} placeholder="Search" placeholderTextColor="#B9B9C5"></TextInput>

      <View style={{ height: 100 }}>
        <ScrollView showsHorizontalScrollIndicator={false} contentContainerStyle={{ marginVertical: 20, alignItems: "center" }} horizontal={true}>
          <View style={{ height: 40, width: 40, backgroundColor: "#FFFFFF", borderRadius: 20, marginRight: 10, borderStyle: "dotted", borderWidth: 5, borderColor: "#E2E2E2" }} />
          <HorizontalCircles color={"#CFC8FF"} />
          <HorizontalCircles color={"#FFA2BF"} />
          <HorizontalCircles color={"#FEE3AA"} />
          <HorizontalCircles color={"#FEDFCC"} />
          <HorizontalCircles color={"#FFA2BF"} />
          <HorizontalCircles color={"#F3A5FF"} />
          <HorizontalCircles color={"#EFBCFF"} />
          <HorizontalCircles color={"#AFBFCF"} />
          <HorizontalCircles color={"#AEDF5F"} />
          <HorizontalCircles color={"#DDB825"} />
        </ScrollView>
      </View>

      <Text style={styles.blackText}>Group Discussion On Going</Text>

      <View style={{ height: 250 }}>
        <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} contentContainerStyle={{ flexDirection: "row", alignItems: "center", }}>
          <HorizontalDiscussion color={"#FFF9F2"} />
          <HorizontalDiscussion color={"#E7FBFF"} />
        </ScrollView>
      </View>

      <Text style={styles.blackText}>Todays Task</Text>

      <ScrollView>
        <View style={{padding:30}}>
          <View style={styles.task}>
            <View>
              <Energy height={35} width={25} fill={"#FB9238"} />


            </View>

            <View style={{ marginLeft: 15 }}>
              <Text style={styles.blackText}>8 Tasks Today</Text>
              <Text style={styles.grayText}>Meet them & Share your experience</Text>
            </View>

            <View style={{ marginLeft: 5 }}>
              <Add height={35} width={25} fill={"#ABA8BA"} />

            </View>

          </View>

          <View style={styles.task}>
            <View >
              <Calendar height={35} width={25} fill={"#FCC626"} />

            </View>

            <View>
              <Text style={styles.blackText}>Event</Text>
              <Text style={styles.grayText}>Create & Share Event</Text>
            </View>

            <View>
              <Add height={35} width={25} fill={"#ABA8BA"} />

            </View>

          </View>


        </View>

      </ScrollView>

    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: "#FFFFFF",
  },
  appIcon: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  input: {
    height: 40,
    borderWidth: .5,
    borderRadius: 10,
    marginVertical: 10,
    backgroundColor: "#F7F6F9",
    marginVertical: 20,
  },
  blackText: {
    fontSize: 20,
    fontWeight: "bold",
    fontFamily: "Times New Roman",
  },
  grayText: {
    color: "#A29E97",
    fontSize: 17,
  },
  task: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 15,
    justifyContent:"space-between"
  }


});

export default App;

这个屏幕是在制作 flex:1 之后在 此处输入图像描述

标签： react-native

解决方案

试试这个代码！！我的意思是添加flex:1

                <View style={{ marginLeft: 15, flex: 1}}>
                  <Text style={styles.blackText}>8 Tasks Today</Text>
                  <Text style={styles.grayText}>Meet them & Share your experience</Text>
                </View>

// 其他样式

<View style={{flex: 1, justifyContent: "flex-start"}}>
              <Text style={styles.blackText}>Event</Text>
              <Text style={styles.grayText}>Create & Share Event</Text>
            </View>

推荐阅读