Перейдите на другой экран из элемента «Плоский список» - PullRequest
Новая
       30

Перейдите на другой экран из элемента «Плоский список»

0 голосов
/ 03 сентября 2018

Я пытаюсь перейти к другому экрану, когда нажимаю на один из элементов в плоском списке.

Код, который я здесь работал, работал пару дней, но теперь он не сразу, когда загружается приложение, EventDetailScreen открывается даже до того, как я нажимаю на любой из элементов плоского списка, затем когда я нажимаю кнопка «Назад» из EventDetailScreen, которая возвращает меня к EventListScreen, если я нажимаю на любой из элементов списка, ничего не происходит, и меня не переносят на EventDetailScreen.

Я также получаю сообщение об ошибке:

Предупреждение: невозможно обновить во время существующего перехода состояния (например, в render или в конструкторе другого компонента). Методы рендеринга должны быть чистой функцией реквизита и состояния; побочные эффекты конструктора являются анти-паттернами, но их можно переместить в componentWillMount.

Я новичок в React Native, поэтому любая помощь будет принята с благодарностью!

Я использую: "react-navigation": "^2.7.0", "react": "16.4.1", "react-native": "0.56.0",

Я использовал этот ответ Навигация к каждому элементу в FlatList в SO, чтобы он работал изначально.

EventListScreen.js 

export default class EventListScreen extends Component {

constructor() {
    super();
    this.ref = firebase.firestore();
    this.unsubsribe = null;

    this.state = {
        eventName: '',
        eventLocation: '',
        loading: true,
        events: [],
    };
}

componentDidMount() {
    console.log('EventsListScreen1');
    this.unsubsribe = this.ref.onSnapshot(this.onCollectionUpdate)
}

componentWillUnmount() {
    this.unsubsribe();
}


openDetails = () => {
    this.props.navigation.navigate('EventDetailScreen');
};

render() {

    if (this.state.loading) {
        return null;
    }

    return (
        <Container>

            <FlatList
                data={this.state.events}
                // Get the item data by referencing as a new function to it
                renderItem={({item}) =>
                    <Event
                    openDetails={() => this.openDetails()}
                    {...item} />}
            />

            <View style={{flex: 1}}>
                <Fab
                    active={this.state.active}
                    direction="left"
                    containerStyle={{}}
                    style={{backgroundColor: '#5067FF'}}
                    position="bottomRight"
                    onPress={() => 
                    this.props.navigation.navigate('EventForm')
                    }>
                    <Icon 
                       name="ios-add"/>
                </Fab>
            </View>

        </Container>
    );
}

Event.js 

export default class Event extends Component {

render() {

    return (
        <Card>
            <CardSection>
                <Text>{this.props.eventName}</Text>
            </CardSection>

            <TouchableOpacity
              onPress={this.props.openDetails()}
            >
            <CardSection>
                <Image
                    style={{
                       width: 350,
                       height: 300
                    }}
                    source={{
                       uri: this.props.imageDownloadUrl
                    }}
                />
            </CardSection>

            <CardSection>
                <Text>{this.props.eventLocation}</Text>
            </CardSection>
            </TouchableOpacity>
        </Card>
    );
}};

EventDetailScreen.js 

export default class EventDetailScreen extends Component {
render() {
    /* 2. Get the param, provide a fallback value if not available */
    const { navigation } = this.props;
    const itemId = navigation.getParam('itemId', 'NO-ID');

    return (
        <View 
           style={{ 
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center' 
            }}>
            <Text>Details Screen</Text>
        </View>
    );
}}

1 Ответ

0 голосов
/ 03 сентября 2018

Это, вероятно, из-за следующей строки в Event компоненте. 

<TouchableOpacity
    onPress={this.props.openDetails()} // <-- this line to be specific
 > ... </>

Как только EventScreenList отображает список, первая строка выполняет метод openDetails(), который переключает экран.

Вы можете избежать этого, используя onPress={() => this.props.openDetails()}.

Также неплохо иметь следующее в конструкторе или componentDidMount компонента EventScreenList, поскольку обе функции используют this контекст оператора. 

this.openDetails = this.openDetails.bind(this);
this.onCollectionUpdate = this.onCollectionUpdate.bind(this);

Чтобы проверить значение вышеприведенного утверждения, попробуйте 

<TouchableOpacity
    onPress={this.props.openDetails} // <-- this line
 > ... </>

Предупреждающее сообщение вызвано навигацией до завершения обновления состояния.

...