Touchabe Opacity не работает в React Navigation

я использую RN версии 0.59.9 и React Navigaton 3.11.1.

Я хочу добавить onPress в свое представление, поэтому я оборачиваю его в TouchableOpacity, но у меня это не работает.

Я пытаюсь использовать его вне React Navigation, и он все еще работает, так что, возможно, это ошибка в этой библиотеке.

Я попытался установить высоту представления, которое я хочу добавить в OnPress, но все еще не работает.

ОБНОВЛЕНИЕ: Для получения дополнительной информации для вас, ребята, есть код:

у меня есть два экрана, как это:

class VuaTraiCayApp extends Component {
      render() {
        return <AppContainer />;
      }
    }

    const stack = createStackNavigator(
      {
        Home: {
          screen: HomeScreen
        },
        Detail: {
          screen: DetailScreen
        }
      },
      {
        defaultNavigationOptions: {
          headerTitle: "Trang chủ"
        }
      }
    );

    const AppContainer = createAppContainer(stack);

На главном экране я хочу добавить onPress в представление, поэтому я обернул представление внутри TouchabeOpacity. Это не работает:

<TouchableOpacity 
      onPress={()=> {
        alert("Clicked");
      }}
    >
      <View 
        style={{
          width: 200,
          height: 500,
          backgroundColor: "pink"
        }} 
      />
    </TouchableOpacity>

Но если я использую тот же код вне стека. Давайте посмотрим, как я перемещаю этот код в корень без стека. Это работает отлично.

class VuaTraiCayApp extends Component {
  render() {
    return (
       <TouchableOpacity 
          onPress={()=> {
            alert("Clicked");
          }}
        >
          <View 
            style={{
              width: 200,
              height: 500,
              backgroundColor: "pink"
            }} 
          />
        </TouchableOpacity>
);
  }
}

react-native react-navigation touchableopacity
person Phi Anh Kiệt    schedule 10.08.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Иногда VSCode импортирует Touchable из обработчика жестов

import {
 TouchableOpacity
} from 'react-native-gesture-handler'

Вам нужно правильно связать библиотеку, иначе она покажет кнопку, но щелчок может не работать. (Это всего лишь крайний случай, с которым я столкнулся)

Другие полезные ссылки: https://github.com/react-navigation/react-navigation/issues/1225

person Victor    schedule 10.08.2019
comment
Спасибо, это моя ошибка. Он был добавлен из «обработчика жестов». Спасибо за Ваш ответ - person Phi Anh Kiệt; 10.08.2019

arrow_upward
0
arrow_downward

вот моя база реализации на вашем исходном коде. Это работает нормально. Пожалуйста, сравните его с вашим. Или, конечно, опубликуйте свой HomeScreen. Я думаю, я могу понять.

Если вы хотите протестировать его. Скопируйте все мои и вставьте в свой App.js (убедитесь, что корневой index.js подходит для нового)

import React, { Component } from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation'
import { TouchableOpacity, View } from 'react-native'

class HomeScreen extends Component {
  render() {
    return (
      <TouchableOpacity
        onPress={() => {
          alert("Clicked");
        }}
      >
        <View
          style={{
            width: 200,
            height: 500,
            backgroundColor: "pink"
          }}
        />
      </TouchableOpacity>
    )
  }
}

class DetailScreen extends Component {
  render() {
    return (
      <View
        style={{
          width: 200,
          height: 500,
          backgroundColor: "yellow"
        }}
      />
    )
  }
}

const stack = createStackNavigator({
  Home: {
    screen: HomeScreen
  },
  Detail: {
    screen: DetailScreen
  }
}, {
    defaultNavigationOptions: {
      headerTitle: "Trang chủ"
    }
  })

const AppContainer = createAppContainer(stack);

class App extends Component {
  render() {
    return (
      <AppContainer />
    )
  }
}

export default App;
person Thong M Truong    schedule 10.08.2019
comment
Ваш код работает нормально. Теперь я знаю проблему: VS Code импортирует TouchableOpacity из «обработчика жестов». Я изменил его, и теперь он работает. Спасибо за вашу помощь. - person Phi Anh Kiệt; 10.08.2019