在 React Native 的 FlatList 中添加一个按钮

Question

我有一个 FlatList，我正在尝试在项目下方添加一个按钮，当您单击该按钮时，它应该会在警报中显示项目的名称。

class TopMovies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        apiTopLoaded: false,
        topPopularMovies: [],
    }
    this.conditionalTopPopular = this.conditionalTopPopular.bind(this);
    this.mybuttonclick = this.mybuttonclick.bind(this);
}

componentDidMount() {
fetch('someurls')
    .then((response)=>{
        response.json()
            .then((popularMovies) => {
                this.setState({
                    apiTopLoaded: true,
                    topPopularMovies: popularMovies.results,
                })
            })
    })    


mybuttonclick() {
    Alert.alert(item.original_title)
}

conditionalTopPopular() {
    if(this.state.apiTopLoaded===true) {
        return(
                <FlatList
                    horizontal={true}
                    data={this.state.topPopularMovies}
                    renderItem={({ item }) => (
                    <View>

                        <Text>{item.original_title}</Text>
                        <Button onPress={this.mybuttonclick} title="hello"/>
                    </View>
                    )}
                    keyExtractor={item => item.id}
                />
            </View>
        )

    }
}

我可以在列表中看到所有的电影名称，并且在电影名称下方看到按钮，但是当我点击它时，它显示 "cant find variable item"。函数 mybuttonclick 应该提醒 item.original_title 道具，因为它在平面列表中正确显示。请帮忙。

Answer 1

像这样更改您的函数：

mybuttonclick(movieTitle) {
    Alert.alert(movieTitle)
}

然后像这样传入电影标题：

<Button onPress={this.mybuttonclick(item.original_title)} title="hello"/>

Answer 2

你应该像这样在onPress中使用粗箭头功能。

<Button onPress={() => this.mybuttonclick(item.original_title)} title="hello"/>

在 React Native 的 FlatList 中添加一个按钮

Adding a button in a FlatList in React Native

react-native

react-native-flatlist