Как поместить данные this.props в селектор headerRight? - PullRequest
Новая
       56

Как поместить данные this.props в селектор headerRight?

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

Я использую react-redux для получения моих FlatList данных и настраиваю свой заголовок с помощью react-navigation.

Я хочу добавить селектор в headerRight, моя проблема в том, что я понятия не имею, какдобавьте данные в мой headerRight.

Вот мой параметр заголовка. 

const data = [
  { key: 0, section: true, label: 'Title' },
  { key: 1, label: 'Red Apples' },
  { key: 2, label: 'Cherries' },
  { key: 3, label: 'Cranberries', accessibilityLabel: 'Tap here for cranberries' },
  { key: 4, label: 'Vegetable', customKey: 'Not a fruit' }
];

class MovieTimeList extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.theaterCn}`,
    headerStyle: {
      backgroundColor: '#81A3A7', 
      elevation: null,
    },
    headerTitleStyle: {
      fontWeight: '300',
      fontFamily: 'FFF Tusj',
      fontSize: 18
    },
    headerRight:
      <ModalSelector
        data={data}
        initValue="Title"
        onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }}
      />,
  });

Вот моя функция response-redux mapStateToProps, действие которого вызывает API для получения данных: 

const mapStateToProps = (state) => {
  const timeList = state.listType.timeList;

  return { timeList };
};

Я могу показать movieData в FlatList из Reaction-redux: 

  render() {
    const movieData = this.props.timeList;
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          data={movieData}
          renderItem={this.renderRow}
          horizontal={false}
          keyExtractor={(item, index) => index.toString()}        
        />
      </View>
    );
  }

Я понятия не имею, как ввести const movieData в мои headerRightселектор.

Любая помощь будет оценена.Заранее спасибо.

Ответы [ 2 ]

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

Вы можете установить param, а затем использовать его в своем заголовке следующим образом 

 componentWillReceiveProps(nextProp){

   if(!isFetching && listNotUpdated){
      this.props.navigation.setParams({ movieList: nextProp.timeList})
   }
 }

, а затем получить его в заголовке следующим образом 

static navigationOptions = ({ navigation }) => {
    const { state } = navigation
    const { movieList }= navigation.state.params
  return {
    title: 'Your Title',
    headerRight: (
      <Button
        title={'Button1'}
        onPress={() => {
          // do something
        }}
      />
    ),
  }

}

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

Я не уверен, что этот код на 100% корректен, в принципе, вы можете сделать это, подключив ваш редуктор к вашему классу MovieTimeList, передавая необходимый компонент вашему компоненту 

class MovieTimeList extends Component {
  static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.theaterCn}`,
    headerStyle: {
      backgroundColor: '#81A3A7', 
      elevation: null,
    },
    headerTitleStyle: {
      fontWeight: '300',
      fontFamily: 'FFF Tusj',
      fontSize: 18
    },
    headerRight:
      <ModalSelector
        data={data}
        initValue={this.props.HeaderTitle}
        onChange={(option)=>{ alert(`${option.label} (${option.key}) nom nom nom`) }}
      />,
  });


const mapStateToProps = (state) => {
  let HeaderTitle = state.yourreducer.headerTitle
  return HeaderTitle
}

export default connect(mapStateToProps,null)(MovieTimeList)
...