Question

我正在尝试在onPress事件上渲染子组件，console.log可以正常工作，但是return函数中的组件不起作用。

父组件：

 onPress = (img,title,content) => {
  this.setState({
  show:true,
  img:img,
  title:title,
  content:content
})
render() {
    return (
      <View style={styles.container}>
        <FlatList 
        data={this.state.data}
        renderItem={({item}) => (
          <TouchableOpacity
          onPress={() => this.onPress(item.urlToImage,item.title,item.content)}
          >
          <View style={styles.picsCont}>
          <Image style={styles.pics} source={{uri: item.urlToImage}}/>
          <Text style={{color:'white', fontSize: 15, fontWeight: '700', paddingTop:10}}>
          {item.title}
          </Text>
          </View>
          </TouchableOpacity>
        )}
        keyExtractor={item => item.title}
        />
        {this.state.show ? 
        <NewsView
         img={this.state.img}
         title={this.state.title}
         content={this.state.content}
         /> :
        null
      }
      </View>
    );
  }
}

子组件：

export default class NewsView extends Component {
  render() {
    console.log(this.props.img)
    return (
      <View style={styles.container}>
      <Image style={styles.picsCont} source={{uri:this.props.img}} />
      <Text style={styles.news}>{this.props.title}</Text>
      <Text style={styles.news}>{this.props.content}</Text>
    </View>
    )
  }
}

感谢您的帮助...！

Answer 1

可能是样式。如果您的子组件有position:'absolute'，则可能位于父组件下，您可以尝试将子组件视图放到zIndex:10

React Native子组件未在onPress事件上呈现

1 个答案: