onPress does not call method in React Native

Asked

Viewed 1,102 times

0

I have a TouchableOpacity that when touching does not call the method alert() in React Native, follow my code:

var data = []; export default class VerOs extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        isLoading: true,
        fontLoaded: false,
        listViewData: data
    };
    this.alerta = this.alerta.bind(this)
}

componentDidMount() {
    this.carregaList(this)
    this.alerta()

}


carregaList(that) {
    var newData = []
    FirebaseConfig.database().ref('/user').on('child_added', function (dat) {
        newData.push(dat)
        that.setState({
            listViewData: newData,
            isLoading: false
        })

    })
}


static navigationOptions = {
    tabBarLabel: 'Ver O.S',
    tabBarIcon: ({ tintColor }) => (
        <Icon name='ios-aperture' color={tintColor} size={24} />
    )
}

alerta(){
    console.log("texto")
}

renderItem({ item }) {

    return (
        <TouchableOpacity onPress={this.alerta} > //AQUI NÃO CHAMA
            <ListItem
                title={item.val().name}
                subtitle={item.val().name}
                leftAvatar={{ source: { uri: item.val().age } }} />
        </TouchableOpacity>
    )

}

render() {
    if (this.state.isLoading) {
        return (
            <View style={styles.container}>
                <ActivityIndicator size="large" animating />
            </View>
        )
    } else {
        return (

            <Container>
                <Header>
                    <Left>
                        <Button transparent>
                            <Icon name='ios-menu' color={"#fff"} size={24} />
                        </Button>
                    </Left>
                    <Body>
                        <Title>Header</Title>
                    </Body>
                    <Right />
                </Header>
                <Content>
                    <FlatList
                        data={this.state.listViewData}
                        renderItem={this.renderItem} />

                </Content>
            </Container>

        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    }
});
react-native

  • So if you open the debug in the browser you will see yours console.log la, all right with your code, now if you want an Alert on the screen there I suggest changing the console.log('texto) for alert('texto')

  • So the code is correct? The console also does not appear.

  • So the way onpress is used yes, there may be a problem in how the list is mounted in Flatlist, I will test your code to see, soon return.

  • Okay buddy I’ll check the bottom. Thank you

2 answers

1

The solution is simple: if creating the function uses the form function function() {} and calling this within it, this is referencing only the scope of the class class, ie it would have to have an alert function within that function or make a function bind within the constructor. When you call function = () => {} this will reference the class and then it will call function alert. I don’t know exactly why this is, but I believe it’s the new Ecmascript specs.

0


I decided after much research.

That stretch:

renderItem({ item }) {...}

I switched to: 

renderItem = ({ item }) => {...}

And now it works, I hope it helps someone ;-)

  • It would add a lot to your answer if you explained how you figured out how to solve it. Why it needs to be this way.

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.