Ширина содержимого для элемента с абсолютным позиционированием в React Native - PullRequest
Новая
       31

Ширина содержимого для элемента с абсолютным позиционированием в React Native

0 голосов
/ 06 мая 2020

Я работаю над каким-то выпадающим компонентом, и я хочу достичь кнопки, и когда пользователь нажимает на нее, должен появиться выпадающий компонент. Родительская оболочка, содержащая кнопку и раскрывающийся компонент, должна иметь ширину и высоту кнопки. Когда появляется раскрывающийся список, он имеет родительскую ширину, и это неверно. Я хочу растянуть его относительно детской ширины, чтобы жестко заданная ширина тоже не помогала. Я думал о fit-content , но не уверен, как он поддерживает в случае RN. 

 <View style={{ width: 40, height: 40, backgroundColor: 'green' }}>
     // How to make its width based on max children width?
     <View style={{ backgroundColor: 'black', position: 'absolute', left: 50, top: -15 }}>
      <Text style={{color: 'white'}}>Item 1</Text>
      <Text style={{color: 'white'}} >Item long long 2</Text>
      <Text style={{color: 'white'}} >Item 3</Text>
      <Text style={{color: 'white'}} >Item long long4 2</Text>
     </View>
  </View>

Вот пример

Любая помощь приветствуется!

1 Ответ

0 голосов
/ 06 мая 2020

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

const CustomDropDown = () => {
  const [showItem,setShowItem]=useState(false);
  return (
     <View>
      <TouchableOpacity style={{ width: 40, height: 40, backgroundColor: 'green' }} 
      onPress={()=>{setShowItem(!showItem)}}>

      </TouchableOpacity>
      {
        showItem &&
        <View style={{ backgroundColor: 'black', position: 'absolute', left: 50, top: -15 }}>
          <Text style={{color: 'white'}}>Item 1</Text>
          <Text style={{color: 'white'}} >Item long long 2</Text>
          <Text style={{color: 'white'}} >Item 3</Text>
          <Text style={{color: 'white'}} >Item long long4 2</Text>
        </View>
      }
      </View>
  );
};
...