Блог

Главная - Вопросы по программированию - Пробелы в react native

Пробелы в react native

#reactjs #react-native #components #react-props

#reactjs #react-native #Компоненты #react-реквизит

Вопрос:

Я совершенно новичок в react native и пытался выровнять каждое изображение после текста, но я получаю это странное пустое пространство, от которого я не знаю, как избавиться. Вот как это выглядит сейчас:

введите описание изображения здесь

Это мой js-код:

 
    export default function App() {
      return (
        <ScrollView>
          <View style={[styles.container]}>
            <Text style={styles.title}>Mt. Fuji</Text>
            <Image source={require("./images/pic.jpeg")} style={styles.uriImg} />
            <TextImg
              text="Rick amp; Morty"
              imageUri={
                "https://m.media-amazon.com/images/M/MV5BZjRjOTFkOTktZWUzMi00YzMyLThkMmYtMjEwNmQyNzliYTNmXkEyXkFqcGdeQXVyNzQ1ODk3MTQ@._V1_.jpg"
              }
              style={[styles.text, styles.propImg]}
            />
            <TextImg
              text="The Butterfly Nebula"
              imageUri={
                "https://www.dualdove.com/wp-content/uploads/2020/02/supernova-dying-star-in-the-shape-of-a-butterfly.jpg"
              }
              style={[styles.text, styles.propImg]}
            />
          </View>
        </ScrollView>
      );
    }

это пользовательский компонент в другом файле с именем comp.

Это мой CSS:

 
    Const styles = StyleSheet.create({
      uriImg: {
        width: 350, 
        height: 200,
        top:110,
        marginBottom:120
      }, 
      propImg: {
        width: 350, 
        height: 200,
        marginBottom:30
      }, 
      container:{
        backgroundColor: '#a1c5ff',
        alignItems: 'center',
        flex:1,
      },
      title: {
        top:100,
        backgroundColor: '#61dafb',
        color: '#20232a',
        textAlign: 'center',
        fontSize: 50,
        fontWeight: 'bold'
      },
      text:{
        color: '#ffffff',
        textAlign: 'center',
        fontSize: 30,
        fontFamily: 'Cochin',
      }
    });

Спасибо!

Комментарии:

1. О каком пробеле вы говорите?

2. О, я имею в виду дополнительный пробел между изображениями и заголовком этих изображений, пробел синего цвета. Пользовательские реквизиты внутри пользовательского компонента TextImg.

3. показать компонент TextImg

4. export default function TextImg(props) { return ( <React.Fragment> <Text style = {props.style}>{props.text} </Text> <Image source={{uri: props.imageUri}} style={props.style}/> </React.Fragment> ); };

Ответ №1:

Вы пытаетесь изменить код patern?

К чему-то вроде этого

 <ScrollView >
        <View> 
          <View>
          <Text>title</Text>
          <Image ..... />
          <Text/> 
           
        </View> 
      </ScrollView>

Ответ №2:

Внутри «TextImg» вы предоставляете как «Изображение», так и «Текст» styles.propImg .
Это дает им обоим высоту 200 пикселей.

может быть, попробуйте изменить свой «TextImg» следующим образом:

 export default function TextImg(props) {     
  return (        
    <React.Fragment>           
      <Text style = {props.style[0]}>{props.text} </Text>           
      <Image source={{uri: props.imageUri}}  style={props.style[1]}/>        
    </React.Fragment>      
  ); 
};

Это должно решить эту проблему.