React Native: SetState löst unerwünschte Tab-Änderung in Tab Navigator

Question

Etwas macht keinen Sinn mit meinem Code. Ich benutze React Native, um eine App zu erstellen. In dieser App verwende ich einen Tab Navigator. Es funktioniert gut, bis ich dies.setState aufrufen, die aus irgendeinem Grund einen unerwünschten Tab-Wechsel von einem Tab zum anderen auslöst.

Warum sollte SetState einen Tab-Wechsel auslösen?

Dies ist mein Code:

import React from 'react'; 
import { StyleSheet, Text, View, FlatList, TextInput, StatusBar, Button } from 'react-native'; 
import { TabNavigator } from 'react-navigation'; 
import { Constants } from 'expo' 
import { purple, white } from './utils/colors' 


const R = require('ramda') 


function CustomStatusBar({ backgroundColor, ...props }){ 
    return (
    <View style={{backgroundColor, height: Constants.statusBarHeight}}> 
     <StatusBar translucent backgroundColor={backgroundColor} {...props} /> 
    </View> 
) 
} 


export default class App extends React.Component { 

    constructor(props){ 
    super(props) 

    this.handleDeckTitle = this.handleDeckTitle.bind(this) 
    } 

    state = { 
    title: '' 
    } 

    renderItem = (sample) => { 
    console.log('renderItem', sample) 

    return <Text>SAMPLE DATA</Text> 
    } 

    handleDeckTitle(e){ 
    console.log('handleDeckTitle') 
    console.log('e', e) 
    console.log('this.state', this.state) 

    this.setState((prevState, props) => ({ 
     title: e 
    })); 
    } 


    submitDeckTitle(){ 
    console.log('submitDeckTitle') 


    } 
    render() { 

    console.log('R', R) 


    const Decks =() => { 
     return (
     <View> 
      <CustomStatusBar backgroundColor={purple} barStyle='light-content' /> 
      <Text>Decks!</Text> 
     </View> 
    ) 

    } 



    const NewDeck =() => { 


     return (
     <View> 
      <CustomStatusBar backgroundColor={purple} barStyle='light-content' /> 
      <Text>What is the title of your new deck?</Text> 
      <TextInput style = {styles.input} onChangeText={this.handleDeckTitle}/> 
      <Button onPress={this.submitDeckTitle} title="Submit" /> 
     </View> 
    ) 

    } 

    const Tabs = TabNavigator({ 
     Decks: { 
     screen: Decks 
     }, 
     'New Deck': { 
     screen: NewDeck 
     }, 
    }); 

    return (

     <Tabs /> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    paddingTop: 23, 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    input: { 
     margin: 15, 
     height: 40, 
     borderColor: '#7a42f4', 
     borderWidth: 1 
    }, 
}); 

Ich sehe nicht, was mit diesem Code falsch ist. In der Tat denke ich, es sollte einfach normal funktionieren, aber es tut es nicht. Es löst eine Registerkarte wechseln, wenn ich handleDeckTitle aufrufen, die dann this.setState

Answer 1

Ruft es jetzt zu arbeiten.

Ich habe den Teil geändert, der setState als separate Komponente mit eigenem Status aufruft. Hier

ist der Code:

import React from 'react'; 
import { StyleSheet, Text, View, FlatList, TextInput, StatusBar, Button } from 'react-native'; 
import { TabNavigator } from 'react-navigation'; 
import { Constants } from 'expo' 
import { purple, white } from './utils/colors' 


const R = require('ramda') 


function CustomStatusBar({ backgroundColor, ...props }){ 
    return (
    <View style={{backgroundColor, height: Constants.statusBarHeight}}> 
     <StatusBar translucent backgroundColor={backgroundColor} {...props} /> 
    </View> 
) 
} 


const Decks =() => { 
    return (
    <View> 
     <CustomStatusBar backgroundColor={purple} barStyle='light-content' /> 
     <Text>Decks!</Text> 
    </View> 
) 

} 




class NewDeck extends React.Component { 
    constructor(props){ 
    super(props) 
    this.handleDeckTitle = this.handleDeckTitle.bind(this) 
    } 

    state = { 
    title: '' 
    } 

    handleDeckTitle(e){ 
    console.log('handleDeckTitle') 
    console.log('e', e) 
    console.log('this.state', this.state) 

    this.setState((prevState, props) => ({ 
     title: e 
    })); 
    } 

    render(){ 
    return (

      <View> 
      <CustomStatusBar backgroundColor={purple} barStyle='light-content' /> 
      <Text>What is the title of your new deck?</Text> 
      <TextInput style = {styles.input} onChangeText={this.handleDeckTitle}/> 
      <Button onPress={this.submitDeckTitle} title="Submit" /> 
      </View> 
     ) 

    } 
} 



const Tabs = TabNavigator({ 
    Decks: { 
    screen: Decks 
    }, 
    'New Deck': { 
    screen: NewDeck 
    }, 
}); 



export default class App extends React.Component { 

    constructor(props){ 
    super(props) 

    // this.handleDeckTitle = this.handleDeckTitle.bind(this) 
    } 

    state = { 
    title: '' 
    } 

    renderItem = (sample) => { 
    console.log('renderItem', sample) 

    return <Text>SAMPLE DATA</Text> 
    } 




    submitDeckTitle(){ 
    console.log('submitDeckTitle') 


    } 
    render() { 

    console.log('R', R) 



    return (

     <Tabs /> 

    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    paddingTop: 23, 
    flex: 1, 
    backgroundColor: '#fff', 
    alignItems: 'center', 
    justifyContent: 'center', 
    }, 
    input: { 
     margin: 15, 
     height: 40, 
     borderColor: '#7a42f4', 
     borderWidth: 1 
    }, 
});