Блог

Главная - Вопросы по программированию - Реагировать самостоятельно в стилях выражения if

Реагировать самостоятельно в стилях выражения if

#react-native

#react-native

Вопрос:

Я перечисляю данные в Touchableopacity.Длина элемента списка составляет от 10 до 350 символов. Каждый элемент списка имеет рамку в виде прямоугольника, а их высота является статической (150 пикселей). Я просто хочу сделать высоту динамической. Это то, что я пробовал.

Стили

 listItem:{
    flex: 1,
    width: '100%',
    height: 150,
    backgroundColor:'#E7C287',
    borderWidth: 1,  
    justifyContent: 'center',
    alignItems: 'center',  
        },    
listItem2:{
    flex: 1,
    width: '100%',
    height: 150,
    backgroundColor:'#E7C287',
    borderWidth: 1,  
    justifyContent: 'center',
    alignItems: 'center',  
        },

Мое решение таково

       { Object.keys(text).length <200 ?
          
           <View
     
           style={listStyles.listItem}>
           
             
         <Text         
           style={ fontstill}
            
             
             >{text}</Text>
         </View>
        
       :
      
       <View
     
        style={listStyles.listItem2}>
        
          
      <Text         
        style={ fontstill}
         
          
          >{text}</Text>
      </View>
       }
    </TouchableOpacity>

Как я могу сделать это для 3 условий, таких как listStyles.listItem3

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

1. вы уже открыли блок js, когда писали style={ поэтому вам следует убрать фигурные скобки из числа, sytle={[ count < 250 ? .....]}

2. Да, как я уже упоминал, я пробовал это. Он говорит то же самое

3. я не чувствую себя комфортно, используя синтаксис массива: p, попробуйте style={count < 250 ? style1 : style2}

4. Да, я нахожу это при поиске, также этот способ говорит то же самое

5. да, но вместо объявления количества внутри текста, вы можете объявить его сразу после объявления текста

Ответ №1:

Попробуйте заменить свой текстовый JSX на

     <Text 
      //There is the I want to make it dynamic
      style={Object.keys(text).length} < 250 ? listStyles.listItem : listStyles.listItem2}>      
      {text}</Text>

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

1. Я добавил внизу

2. Удалите символ «}» после «250»

3. Извините, я допустил ошибку. Я обновил ответ с изменениями (просто удалил лишний {})

Ответ №2:

Вы должны отделить объявление переменной от jsx

 import React from 'react';
import { listStyles } from './styles/ListStyles';

const [stil, setstil] = useState(listStyles.listItem);

const text = item1.sample;

const ListStyles = () => {
  const count = Object.keys(text).length;
  return (
    <TouchableOpacity
        <View style={stil}>
          <Text 
            style={count < 250 
            ? listStyles.listItem 
            : listStyles.listItem2
            }>
              {text}
            </Text>
      </View>
    </TouchableOpacity>
  );
}

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

1. Все еще не могу найти то же самое, я принимаю решение, но оно работает при двух условиях. Как я могу сделать это для 3