我需要在 React Native 中使用 TouchableOpacity 传递一个值答案

【问题标题】：i need pass a value with TouchableOpacity in React Native我需要在 React Native 中使用 TouchableOpacity 传递一个值
【发布时间】：2020-08-27 22:32:52
【问题描述】：

我需要通过按平面列表项更改信息并在主视图中显示我的主要问题是使用 touchableOpacity 更改信息

export default function HomeScreen() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const actualNoticia = data[2];

  useEffect(() => {
    fetch('http://newsapi.org/v2/top-headlines?country=mx&apiKey=7b1bcdb1cbe04f709b69c0ef4f9c323b')
      .then((response) => response.json())
      .then((json) => setData(json.articles))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  const renderItem = ({ item }) => (
    <TouchableOpacity>
    <View style={styles.itemHorizontal}>
      <View style={{ flex: .9, width: windowWidth * .95, padding: 10, backgroundColor: Colors.ColorPrincipal, borderRadius: 5, flexDirection: 'row' }}>
        <View style={{ flex: .4 }}>
          <Image source={{ uri: item.urlToImage }} resizeMode='cover' style={{ width: '90%', height: '95%' }} />
        </View>
        <View style={{ flex: .6, justifyContent: 'center' }}>
          <View style={{ flex: .35 }}>
            <Text style={{fontSize:12,color:Colors.ColorSecundario}}>{item.title}</Text>
          </View>
          <View style={{ flex: .65, justifyContent: 'center' }}>
            <Text style={{fontSize:10,color:Colors.ColorSecundario}}>{item.description}</Text>
          </View>
        </View>
      </View>
    </View>
    </TouchableOpacity>
  );

我需要使用 onPress 函数更改 item 的 actualNoticia 值

【问题讨论】：

标签： javascript react-native

【解决方案1】：

像这样使用useState

export default function HomeScreen() {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);
  const [actualNoticia, setActualNoticia] = useState({});

  useEffect(() => {
    fetch('http://newsapi.org/v2/top-headlines?country=mx&apiKey=7b1bcdb1cbe04f709b69c0ef4f9c323b')
      .then((response) => response.json())
      .then((json) => setData(json.articles))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  const renderItem = ({ item }) => (
    <TouchableOpacity onPress={()=>{setActualNoticia(item)}}>
    <View style={styles.itemHorizontal}>
      <View style={{ flex: .9, width: windowWidth * .95, padding: 10, backgroundColor: Colors.ColorPrincipal, borderRadius: 5, flexDirection: 'row' }}>
        <View style={{ flex: .4 }}>
          <Image source={{ uri: item.urlToImage }} resizeMode='cover' style={{ width: '90%', height: '95%' }} />
        </View>
        <View style={{ flex: .6, justifyContent: 'center' }}>
          <View style={{ flex: .35 }}>
            <Text style={{fontSize:12,color:Colors.ColorSecundario}}>{item.title}</Text>
          </View>
          <View style={{ flex: .65, justifyContent: 'center' }}>
            <Text style={{fontSize:10,color:Colors.ColorSecundario}}>{item.description}</Text>
          </View>
        </View>
      </View>
    </View>
    </TouchableOpacity>
  );

【讨论】：

感谢您的帮助:)