Все коды кажутся мне понятными, но в нем говорится, что есть проблема, которую я не мог выяснить. Другой вопрос: я хочу, чтобы в моем представлении был текст как "+8", я делаю это, но не в середине ... Как я могу разместить его точно посередине? Я написал, где ошибки, как "// здесь красный цвет"

Вот App.js

import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, TextInput, ScrollView } from 'react-native';
import { Circle } from 'react-native-svg';
import Application from "./src/components/icons/application.svg"
import HorizontalCircle from "./src/components/HorizontalCircles";
import HorizontalCircles from './src/components/HorizontalCircles';


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={styles.discussionOutside}>
        <View style={styles.discussionInside}>
          <View style={styles.firstDiscussion}>
            <View style={{ height: 10, width: 10, backgroundColor: "red", borderRadius: 10, }} />
            <Text style={{ marginLeft: 10 }}>Live</Text>
          </View>
          <View>
            <Text style={styles.grayText}>Topic</Text>
            <Text style={styles.blackText}>Human Resources Analysis</Text>
            <Text style={styles.grayText}>By Emran Emon</Text>
            <View style={styles.circles}>
              <View style={{ height: 40, width: 40, backgroundColor: "#DDF0F8", borderRadius: 25, marginLeft: 5,borderWidth:1,borderColor:"white" }} />
              <View style={{ height: 40, width: 40, backgroundColor: "#CEC7FE", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white"  }} />
              <View style={{ height: 40, width: 40, backgroundColor: "#FEA2BE", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white"  }} />
              <View style={{ height: 40, width: 40, backgroundColor: "#FEE3AB", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white"  }} />
              <View style={{ height: 30, width: 30, backgroundColor: "#FEE3AA", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white"  }}>
                <Text style={{textAlign:"center"}}>+8</Text>
              </View>  //  it shows red color here

            </View>
          </View>
          
         
        </View>
      </View>

    </SafeAreaView> //  it shows red color here, and all the styles part in stylesheet

  );
};

const styles = StyleSheet.create({
  container: {
    flex:1,
    padding:30,
    backgroundColor:"#FFFFFF",
  },
  appIcon: {
    flexDirection:"row",
    justifyContent:"space-between",
    alignItems:"center",
  },
  input: {
    height: 40,
    borderWidth: .5,
    borderRadius: 10,
    marginVertical: 10,
    backgroundColor: "#F7F6F9",
    marginVertical:20,
  },
  discussionInside: {
    backgroundColor: "#FFF9F2",

  },
  firstDiscussion: {
    flexDirection:"row",
    alignItems:"center",
    borderRadius:20,
    padding:20,
    marginBottom:20,
  },
  grayText: {
    color:"#A29E97",
    fontSize:17,
  },
  blackText:{
    fontSize:20,
    fontWeight:"bold",
    fontFamily: "Times New Roman",
  },
  circles: {
    flexDirection:"row",
    alignItems:"center",
  }
});

export default App;
0
user15974221 19 Май 2021 в 20:51

1 ответ

Лучший ответ

Я не вижу никаких проблем с вашим кодом, поэтому я просто обновляю приложение, может быть, оно работает, для вашей второй заботы о перемещении +8 в центре вы можете сделать родительский вид текста, как показано ниже:

 <View style={{ height: 30, width: 30, backgroundColor: "#FEE3AA", borderRadius: 25, marginLeft: -5, borderWidth: 1, borderColor: "white" , alignItems: 'center', justifyContent: 'center' }}>
     <Text style={{textAlign:"center"}}>+8</Text>
 </View>
1
Kulsoom Irshad 19 Май 2021 в 18:31