Блог

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

 class randomComponent extends Component {



    render() {
    
    return (
      <Pressable>
        <Text>Hello World</Text>
      </Pressable>
      )
    
    } 

tl:dr Как мне выделить нажимной компонент? Спасибо

Решение:

  import { TouchableOpacity } from 'react-native'
 

TouchableOpacity лучше подходит для разработчиков, имеющих опыт работы с веб-фоном и дизайном.

Вам нужно использовать переменную состояния, чтобы сохранить pressed состояние и соответствующим образом изменить стиль компонента

 class randomComponent extends Component {
    constructor(props) {
      super(props)
      
      this.state = {
         pressed: false
      }
    }


    render() {
    
      return (
        <Pressable 
          onPressIn={() => this.setState({pressed: true})} 
          onPressOut={() => this.setState({pressed: false})}
          style={this.state.pressed ? styles.pressed : {}}
        >
          <Text>Hello World</Text>
        </Pressable>
      )
    
}

const styles = StyleSheet.create({
  pressed: {
    backgroundColor: 'red'
  }
})
 

Вы можете просто использовать стиль «render prop» вместо этого, если хотите получить доступ к нажатому состоянию без необходимости хранить свою собственную useState переменную.

Из документов:

 <Pressable
  style={({ pressed }) => [
    {
      backgroundColor: pressed
        ? 'rgb(210, 230, 255)'
        : 'white'
    },
    styles.wrapperCustom
  ]}>
  {({ pressed }) => (
    <Text style={styles.text}>
      {pressed ? 'Pressed!' : 'Press Me'}
    </Text>
  )}
</Pressable>