Блог

Я запускаю приложение RN, используя собственную базу для укладки. У меня есть четыре элемента на моей домашней странице: заголовок, представление вкладки vreact-native-tab-view , содержащее ScrollView около 70% области просмотра, и два меньших 100% width элемента внизу.

Однако вид прокрутки заполняет более 100% видового экрана, и два меньших элемента перемещаются вниз.

Я заглянул в свой инспектор элементов и могу применить гибкую ссылку к некоторым из многих div s, но я не уверен, какой из них есть в моем коде, потому что это div ад, когда вы используете react-native. У React devtools также есть та же проблема, за исключением того, что это View ад.

Итак, два вопроса:

1. Как я могу гарантировать, что контейнер для прокрутки не заполнится больше, чем должно быть на странице?
2. Как я могу эффективно отлаживать react native, когда инструменты разработки chrome и react находятся в беспорядке?

Для справки, вот как я стилизовал до сих пор:

Главная страница.tsx:

 <View flex={1}> // applied a flex for the entire homepage
  <TabView
    navigationState={{ index, routes }}
    renderScene={renderScene}
    renderTabBar={renderTabBar}
    onIndexChange={setIndex}
    initialLayout={{ width: layout.width, height: "100%" }}
  />

  <View width="100%">
    <Center width="100%">
      <StrengthSlider />
    </Center>
    <AdMobBanner
      ...props
    />
  </View>
</View>
 

Чаи.tsx:

 <View flex={1} bg="white">
  <ScrollCards teas={blackTeas} />
</View>
 

СкроллКарты.tsx:

 <ScrollView>
  <Center>
    {teas.length > 0 amp;amp;
      teas.map((teaObj) => (
        <TeaCard id={teaObj.id} teaData={teaObj.data} key={teaObj.id} />
      ))}
  </Center>
</ScrollView>
 

Редактировать:

Ссылка на песочницу кода: https://codesandbox.io/s/gracious-sammet-l4tqz?file=/src/App.jsamp;resolutionWidth=402amp;resolutionHeight=675

Обратите внимание, что нижний колонтитул admob остается под содержимым карточек. Он должен быть липким и всегда оставаться в нижней части экрана. Я также заметил, что, когда я не использую заголовок из MainStackNavigator нижнего колонтитула, он работает так, как задумано, то есть остается липким внизу, но я не понимаю, почему использование компонента header ( AppBar ) должно мешать моему нижнему колонтитулу.

Правильное решение для получения желаемого результата-добавить a flexBasis к TabView подобному:

 <TabView 
  style={{ flexBasis: 0 }}
  // rest of the code
/> ​
 

Почему?
Имеет стиль по TabView умолчанию flex: 1, overflow: 'hidden' (см. Исходный код), в результате чего он расширяется до размера своего самого большого дочернего элемента. Это flexBasis предотвращает это и гарантирует, что панель вкладок получит правильную высоту.

Ресурс: Это хорошая статья о flexBasis по ширине/высоте: https://mastery.games/post/the-difference-between-width-and-flex-basis/

Отладка стиля в React-Native не имеет лучшего опыта разработчика. Есть некоторые вещи, которые вы можете использовать, чтобы помочь вам с отладкой стиля:

• Инспектор RN: Как упоминал Берси, в React native есть меню разработчика, в котором вы можете выбрать «показать инспектора», который действует как «проверить элемент» в браузере. Это хороший инструмент для отладки элементов, которые вы можете видеть, он также помогает при отладке событий ввода/вывода.
• Цвет: Чаще всего я просто использую старомодные цветные границы и фон, чтобы получить четкое представление о том, где находятся элементы и их размер/перекрытия.
• Комментарии и упрощение: Не стесняйтесь комментировать компоненты, которые вас не интересуют, и заменять сложные компоненты/представления, например ScrollCards , простым цветным представлением. Это может помочь предотвратить влияние нескольких моделей поведения на то, что вы пытаетесь отладить
• Браузер проверяет и реагирует на devtools: Если вам посчастливилось запустить приложение RN в браузере, то знакомство с этими инструментами поможет вам загрузить. Просто имейте в виду, что React amp; React-Native-это не одно и то же.

Когда вы отлаживаете визуальные элементы, лучший способ-начать с верхнего уровня и работать дальше. Раскрасьте элементы и не стесняйтесь комментировать элементы, чтобы получить более четкое представление о проблеме. Продолжайте копать, пока не найдете проблему, не бойтесь заглядывать в исходный код используемых вами пакетов, это часто помогает прояснить (неожиданное) поведение.

Вы могли бы попытаться заменить

 <View flex={1}> // applied a flex for the entire homepage
 

в Home.tsx с

 <View flex="1 1 0">
 

Рабочий пример здесь (изменен ли ваш код с этой строкой).

Что касается отладки, я могу предложить только то, что уже предложено на странице отладки react native. Ты уже пробовал React Developer Tools ? В chrome вы также можете добавить его в качестве расширения по этой ссылке.

Я не уверен, есть ли какая-либо разница между расширением chrome и пакетом npm, но расширения было достаточно, по крайней мере, для меня (на данный момент).

Единственная проблема заключается в том, что я также боролся с отладкой в codesandbox, так как расширение определенно не работает в онлайн-редакторах javascript (но, вероятно, пакет npm также не подходит для этого конкретного случая)

Попробуй это — https://snack.expo.dev/fL0OgQ9uS

 import React from 'react';
import { View, Image, StyleSheet,ScrollView,Text } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
    flex:1,
    backgroundColor:'aqua',
  },
  tinyLogo: {
    width: 200,
    height: 200,
  },
  header:{
    backgroundColor:'green',
    paddingBottom:20,
  },
  footer:{
    backgroundColor:'green',
    paddingTop:20,
  }
});

const DisplayAnImage = () => {
  return (

    <View style={styles.container}>
      <View style={styles.header}><Text>header</Text></View>
       <ScrollView>
        <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
              <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
              <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
              <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
              <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
              <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />

              <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
  
      </ScrollView>
      <View  style={styles.footer}><Text>footer</Text></View>
    </View>

  );
}

export default DisplayAnImage;