Блог

Главная - Вопросы по программированию - Динамическое изменение ширины компонента в React Native

Динамическое изменение ширины компонента в React Native

#typescript #react-native

Вопрос:

В настоящее время у меня есть компонент, который принимает мои макетные данные из хранилища. Я могу отображать каждую страницу с динамическими данными с помощью моих макетных данных, которые хранятся в папке магазина:

mockData.ts:

 {
name: 'Triggerfish',
imageSrc: require('../resource/images/ClownTriggerfish.png'),
scientificName: 'Balistidae',
diet: 'Carnivores',
maxSize: '20-100cm',
family: [
  require('../resource/images/ClownTriggerfish.png'),
  require('../resource/images/RedtoothTriggertish.png'),
  require('../resource/images/OrangeLineTriggerfish.png'),
  require('../resource/images/PicassoTriggerfish.png'),
] 

},
  {
    name: 'Pufferfish',
    imageSrc: require('../resource/images/DogFacePuffer.png'),
    scientificName: 'Arothron',
    diet: 'Carnivores',
    maxSize: '10-120cm',
    family: [
      require('../resource/images/DogFacePuffer.png'),
      require('../resource/images/GuineafowlPuffer.png'),
      require('../resource/images/StarryPuffer.png'),
    ]
  },

Затем у меня есть отдельный компонент, называемый BottomImages.js где я загружаю данные изображения из файла mockdata.ts. Здесь я вручную установил номер своей колонки.:

 const ITEM_WIDTH = Dimensions.get('window').width / 1.2;

const BottomImages: React.FC<FamilyCarouselProps> = ({ family }) => { 

const columns = 3;

  const [activeItemIndex, setActiveItemIndex] = useState()
return(
    <FlatList
      numColumns={columns}
      data={family}
      renderItem={({ item }) => {
        return (
          <ListItem
            itemWidth={(ITEM_WIDTH - (10 * 3)) / 3}
            image={item.image}
            itemIndex={item.id}
            activeItemIndex={activeItemIndex}
            onChangeActiveItemIndex={(index)=>{
              setActiveItemIndex(index)
            }}
          />
        );
      }}
    />
);
}

И мой компонент ListItem, который показывает изображения, находится ниже:

 const ListItem: React.FC = (props) => {
const [background, setBackground] = useState(true);  

return(
  <TouchableWithoutFeedback onPress={() => setBackground(current => !current)} >
  <Animated.View
    style={{
      margin: 5,
    }}>
    <View onClick={() => setBackground(current => !current)}
     style={{borderWidth: background? 0:0,
        borderColor: '#000',}}>
    <Image
      style={{
        width: props.itemWidth,
        resizeMode: "contain",
        height: 200,
      }}
      source={props.image}></Image>
      </View>
  </Animated.View>
</TouchableWithoutFeedback>
);
}

Итак, теперь проблема в том, что для рыб с 3 изображениями в моем семейном массиве есть хорошая компоновка, где все это помещается в одну строку, но для рыб, у которых больше 3, представление искажается, и они переходят в следующую строку:

Я хочу, чтобы номер столбца менялся вместе с количеством изображений в массиве, например, если в моем массиве семейства спинорогов 4 изображения, то он должен изменить номер столбца на 4.

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

1. Не уверен, что вы можете изменить столбец определенной строки с помощью компонента FlatList, возможно, вам придется создать пользовательский компонент списка, в котором у вас есть контроль над отдельными строками.

2. @Mohaimin Я хочу изменить не строки, а только переменную столбцов в моей BottomImages.js что я хочу измениться. В основном он должен показывать количество изображений, которые находятся в моем семейном массиве внутри mockData.ts. Например, в моем семейном массиве Triggerfish 4 изображения, поэтому столбец должен быть столбцом =4. Мой массив семейства фугу имеет 3 изображения, поэтому столбец должен быть столбцом =3 и так далее.

3. Правильно, но опора столбца устанавливается в компоненте FlatList, который, в свою очередь, задает столбец всех строк плоского списка. Итак, если у рыбы есть 4 семейства, вы бы хотели, чтобы в этой конкретной строке было 4 столбца, верно?

4. Правильно, я также хотел бы изменить ширину элемента, которая есть в списке, куда я сейчас помещаю (ITEM_WIDTH — (10 * 3)) / 3, но я хочу изменить его на (ITEM_WIDTH — (10 * столбец)) / столбец после того, как я получу конкретное число из массива. В любом случае, это возможно?

Метки: