React-Native：如何將組件中的項目與另一個組件中的項目綁定？

Question

我正在嘗試使用wix的react-native-calendars庫構建日歷。 例如，當我在Calendar Component單擊2018年12月5日時，它應在Agenda Component上導航至2018年12月5日。 這就是我想要做的。

這是我的Calendar Component代碼，我試圖在其中獲取ID並將其綁定：

    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;

Answer 1

Calender向CalenderScreen傳遞了一個onSelect（id）回調。

日歷屏幕只需要調用onSelect（day）。

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

或使回調接受導航對象和日期

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

現在應該設置日歷

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

或者在將導航對象傳遞給日歷時，為什么要傳遞回調

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

編輯：新課程，並將ID更改為day

同樣的問題。 onSelect導航到AgentScreen並將其傳遞給導航道具（其中包含day對象），然后，AgentScreen將導航道具傳遞給WeeklyAgent，但是WeeklyAgent並不使用導航道具來獲取ID。

selected={Date()}

用今天的日期創建一個新的日期對象。 為了獲得正確的日期，您需要從導航中獲取日期，通常是

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

返回通過的日期。

現在，如果WeeklyAgenda實際上不進一步使用導航，我不會通過。

取而代之的是，每周議程應有一個“天”道具，

 <WeeklyAgenda  navigation={navigation}>

嘗試

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

第一行將params對象從狀態解壓縮到稱為params的變量中。

每周議程現在可以

selected={this.props.day}

我認為這里的問題根本不是綁定。 我建議您閱讀本文或其他有關綁定功能的文章。