Question

我已阅读论坛但我的问题没有运气。我打开了一个新闻源屏幕如下： 1.屏幕通过点击启动新闻组件 2.组件仅获取数据，然后传递给另一个兄弟组件（以显示flatList项目 3.从项目的onPress事件中，应调用并显示组件，以获取所单击项目的详细信息。

问题是第3步无效。单击时会突出显示该项目，并且_onPress（）中的诊断警报可以正常工作。在调试中，我更改了onPress事件，直接使用... navigate（'Newsdetail）打开组件，但仍然没有运气。但当我用'Home'（主屏幕）替换'Newsdetail'时，显示屏幕。我尝试了其他组件（'新闻'）等，除组件外没什么用。我的代码片段和截图如下所示。请帮助，因为我已经结束了我的智慧。谢谢。

 import Newsdata from "../newsdata"; // import disabled for now until newsData component integration works


class News extends Component {

    constructor(props) {
        super(props);
        this.state = {
            news: [],
        };
    }


    getNews() {

        const link = 'https://feeds.feedburner.com/morganstateu';
        const parseString = require('react-native-xml2js').parseString; // convert xml data fetched to json object
        let resJson = [];

        return fetch(link)
            .then(response => response.text())
            .then((response) => {

                parseString(response, function (err, result) {

                    resJson = result; // local var result saved to a global var resJson for later use


                });

                this.setState({news: resJson.rss.channel[0].item});


            }).catch((err) => {
                console.log('fetch', err)
            });

    }

    componentDidMount() {
        this.getNews();
    }


    render() {
        return(
            <Newsdata news = {this.state.news} navigation={this.props.navigation} />

        );


    }
}

export default News;

class Newsdata extends Component {

constructor(props) {
    super(props);
    this.state = {
        newsItem: ''
    };
}

_onPress = (clickedItem) => {
    // this.setState({newsItem: clickedItem});
    // alert(clickedItem.description);

   return  <NewsDetail newsItem={clickedItem} navigation={this.props.navigation}/>
};



render() {
    // console.log(this.state);
    const  { navigate } = this.props.navigation;


    const textColor = this.props.selected ? "red" : "black";

    return (


        <Container style={styles.container}>
            <Content>
                <Header searchBar rounded style={styles.headerTitleStyle} iosBarStyle='light-content'>


                    <Left>
                        <Button transparent onPress={() => this.props.navigation.goBack()}>
                            <Icon name="angle-left"  style={styles.headerIconStyle}/>
                        </Button>
                    </Left>
                    <Body>

                        <Item >
                            <Icon name="search" style={{color: '#fff', fontSize: 25}}/>
                            <Input placeholder="Type Here..."
                                   onChangeText={(text) => this.SearchFilterFunction(text)}
                                   value={this.state.text}
                                   underlineColorAndroid='transparent' />
                        </Item>
                    </Body>

                    <Right>
                    <Button transparent>
                        <Text>Search</Text>
                    </Button>
                    </Right>
                </Header>
                <View style={styles.horizontalLine} />
                <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>


                    <FlatList
                        data={this.props.news}
                        extraData={this.state}
                         renderItem={({ item }) => (

                             <ListItem>
                                 <Thumbnail source={{uri: GetImage(item.description)}} />
                                 <Body style={styles.myListStyle}>
                                     <TouchableOpacity onPress={() => this._onPress(item)} >


                                         <Text  style={{fontSize: 15}}> {item.title} </Text>
                                     </TouchableOpacity>

                                     <Text note >Posted:  {<TimeAgo time={item.pubDate.toString() }  />} </Text>

                                 </Body>
                                 <Right>
                                     <TouchableOpacity onPress={() => navigate('NewsDetail')} >
                                        <Button transparent>
                                            <Icon active name='angle-right' style={{fontSize: 30}} />

                                        </Button>
                                     </TouchableOpacity>
                                </Right>
                             </ListItem>
                        )}
                        keyExtractor={item => item.title}
                        // onPressItem={this._onPress}
                        // refreshing={this.state.refreshing}
                        // onRefresh={this.handleRefresh}
                    />
                </List>

            </Content>
        </Container>
    );
}

}

导出默认新闻数据; 截图： enter image description here enter image description here

十二月18更新：

我按照建议做了。我的_onPress（）处理程序现在返回正确的应用程序状态，showDetails在应用程序启动时为null，在项目单击时设置为{item}。但是下面的代码段中的逻辑没有出现屏幕导航。在点击项目时，屏幕导航到详细信息屏幕（NewsDetail）我做错了什么？谢谢你的帮助，因为我陷入了中立（微笑）。

<View style={styles.horizontalLine} />
                {this.showDetails
                    ? <NewsDetail showDetails={this.state.showDetails} navigation={this.props.navigation}  />
                    : <FlatList
                        data={this.props.news}
                        extraData={this.state}
                        renderItem={({item}) => (

                            <ListItem>
                                <Thumbnail source={{uri: GetImage(item.description)}}/>
                                <Body style={styles.myListStyle}>
                                <TouchableOpacity onPress={() => this._onPress(item)}>


                                    <Text style={{fontSize: 15}}> {item.title} </Text>
                                </TouchableOpacity>

                                <Text note>Posted: {<TimeAgo time={item.pubDate.toString()}/>} </Text>

                                </Body>
                                <Right>
                                    <TouchableOpacity onPress={() => this._onPress(item)} >
                                        <Button transparent>
                                            <Icon active name='angle-right' style={{fontSize: 30}}/>

                                        </Button>
                                    </TouchableOpacity>
                                </Right>
                            </ListItem>
                        )}
                        keyExtractor={item => item.title}
                        // onPressItem={this._onPress}
                        // refreshing={this.state.refreshing}
                        // onRefresh={this.handleRefresh}
                    />}

Answer 1

你的_onPress处理程序实际上不是一个动作，而是一个渲染函数。这并没有真正做任何事情。

您可以做的是将点击的项目存储在您的状态中，具体取决于您可以呈现详细信息屏幕。像这样：

_onPress = item => {
  this.setState({showDetails: item})
}

closeDetails = () => {
  this.setState({showDetails: null})
}

render () {
  return (
    <Container>
      {this.showDetails
        ? <NewsDetail newsItem={this.state.showDetails} />
        : {/* ... render List */}}
    </Container>
  )
}

重要的是，您的动作处理程序不会被称为渲染函数。所以返回JSX不会导致它在任何地方呈现。相反，您需要以一种可以正确处理渲染功能中的新应用状态的方式处理_onPress中的操作。

希望有道理：D

当从另一个兄弟中调用本机时，不显示兄弟组件

1 个答案: