React-Native: как связать элемент в компоненте с элементом в другом компоненте? - PullRequest
Новая
       8

React-Native: как связать элемент в компоненте с элементом в другом компоненте?

0 голосов
/ 05 декабря 2018

Я пытаюсь построить календарь, используя реагировать-родной-календари библиотеки по wix .Например, когда я нажимаю 5 декабря 2018 года в Calendar Component, он должен перейти к 5 декабря 2018 года в Agenda Component.Это то, что я пытаюсь сделать.

Это мой код для Calendar Component, где я пытаюсь захватить идентификатор и связать его: 

    class Calendar extends Component {
    constructor(props) {
        super(props);
         this.state = {
             active: 'true'
         }
    }

    render() { 
        const {onSelect} = this.props;
        return ( 
            <View>
                <CalendarList 
                    keyExtractor = {day=>day.id}
                    onDayPress={(day) => {onSelect.bind(this, day)}}
                    pastScrollRange={12}
                    futureScrollRange={12}
                    scrollEnabled={true}
                    showScrollIndicator={true}
                />
            </View>
         );
    }
}

Calendar.propTypes = {
    onSelect: PropTypes.func,
}

Это мой код CalendarScreen где я делаю навигацию. 

const CalendarScreen = ({navigation}) => (
    <View >
        <Calendar  navigation={navigation} 
            onSelect={(id)=>{
            navigation.navigate('Agenda', {id}) }}>
            <StatusBar backgroundColor="#28F1A6" />
        </Calendar >
    </View>
);

Calendar.propTypes = {
    navigation: PropTypes.object.isRequired
}

export default CalendarScreen;

Я также упомянул решение здесь .Но не повезло.

РЕДАКТИРОВАТЬ:

Это мой Agenda Component

    class WeeklyAgenda extends Component {
    constructor(props) {
    super(props);
    this.state = {
      items: {}
    };
  }

  render() {
    return (
        <View style={{height:600}}>
             <Agenda
                items={this.state.items}
                loadItemsForMonth={this.loadItems.bind(this)}
                selected={Date()}
                renderItem={this.renderItem.bind(this)}
                renderEmptyDate={this.renderEmptyDate.bind(this)}
                rowHasChanged={this.rowHasChanged.bind(this)}
                onRefresh = {() => { this.setState({refeshing : true})}}
                refreshing = {this.state.refreshing}
                refreshControl = {null}
                pastScrollRange={1}
                futureScrollRange = {3}
            />
    );
  }

Это AgendaScreen

    const AgendaScreen = ({navigation}) => (
    <View style={{height: 100}}>
        <WeeklyAgenda  navigation={navigation}>
            <StatusBar backgroundColor="#28F1A6" />
        </WeeklyAgenda >
    </View>
);

WeeklyAgenda.propTypes = {
    navigation: PropTypes.object.isRequired
}

export default AgendaScreen;

1 Ответ

0 голосов
/ 05 декабря 2018

Calender передает CalenderScreen обратный вызов onSelect (id).

Экран календаря должен вызывать только onSelect (день).

onDayPress={(day) => {onSelect(day)}}

Или сделайте так, чтобы обратный вызов принимал как навигационный объект, так и день 

onDayPress={(day) => {onSelect(day, navigation)}}

Календарь должен теперь установить 

onSelect={(day, navigation)=>{
        navigation.navigate('Agenda', {day}) }}>

Или, когда вы проходите навигациювозражать против Каландера, зачем передавать обратный вызов 

onDayPress={(day) => {this.props.navigation.navigate('Agenda', {day})}}

Редактировать: новые классы и изменили идентификатор на день

Та же проблема.onSelect переходит к AgentScreen и передает ему реквизит навигации (с указанием объекта дня в нем), и, в свою очередь, AgentScreen передает реквизит навигации WeeklyAgent, но WeeklyAgent не использует реквизит навигации для получения идентификатора. 

selected={Date()}

Создает новый объект даты с текущей датой.Чтобы получить правильную дату, вам нужно получить день из навигации, обычно что-то вроде 

this.props.navigation.state.params["day"]

возвращает пройденную дату.

Теперь, если WeeklyAgenda фактически не использует навигацию далее, я бы его не пропустил.

Вместо еженедельной повестки дня должна быть указана опора 'day', поэтому вместо 

 <WeeklyAgenda  navigation={navigation}>

try 

const { params } = this.props.navigation.state;
...
<WeeklyAgenda  day={params["day"}>

Первая строкараспаковывает объект params из состояния в переменную с именем params.

WeeklyAgenda теперь будет делать 

selected={this.props.day}

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

...