Как обновить заголовок в реагировать нативный рендер? - PullRequest
Новая
       31

Как обновить заголовок в реагировать нативный рендер?

0 голосов
/ 03 февраля 2020

У меня есть простая функция: 

render() {
    if (this.state.isLoading) {
        // this.props.navigation.setParams({
        //  title: 'Order: Loading'
        // });

        return(
            <View style={{
                flex: 1, 
                alignItems: 'center',
                justifyContent: 'center',
            }}>
                <ActivityIndicator/>
            </View>
        )
    }
}

Проблема в том, что когда я раскомментирую this.props.navigation.setParams, я получаю следующую ошибку: Превышена максимальная глубина обновления .

Знаете ли вы какое-нибудь решение?

Ответы [ 3 ]

0 голосов
/ 03 февраля 2020

Вы должны использовать componentDidUpdate для этого: 

componentDidUpdate(prevProps, prevState) {
  if (this.state.loading) {
    this.props.navigation.setParams({
      title: 'Order: Loading'
    });
  }
}
0 голосов
/ 03 февраля 2020

Вот мое решение. Обновите ваш navigationOptions с помощью этого кода: 

static navigationOptions = ({ navigation }) => ({
  headerTitle: navigation.state.params.title || <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}><ActivityIndicator size="small" color="#ffffff" /></View>
});

Над кодом будет отображаться индикатор загрузки (или вы можете установить stati c загрузка текста), пока он не получит параметр title. Теперь установите этот параметр title после получения вашего заказа следующим образом: 

fetchOrders = () => {
  const order = await fetchOrders(); // your code to fetch orders
  this.props.navigation.setParams({ title: (order) ? order.title : "UNTITILED" });

  // Note : Always check if order is available or not to avoid unexpected error
}

Не забудьте импортировать ActivityIndicator из реактивного натива, если вы его используете.

0 голосов
/ 03 февраля 2020

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

Я полагаю, что вы делаете вызов API и в соответствии с этим this.state.isLoading зависит. Итак, теперь я бы сказал, что изначально установите для header значение Is Loading. 

constructor(props){
this.state={
isLoading:true,
title:'Is Loading'
}
}

Теперь предположим, что вы делаете вызов API и получаете его результат: 

like fetchApiData = async() => {

axios.post(url).then((data) => {

this.setState({isLoading:false,title:data.title});
this.props.navigation.setParams({
         title: data.title
        });

}).catch(err => {
this.setState({isLoading:false,title:error});
this.props.navigation.setParams({
         title: error
        });

})

надеюсь, что вы чисты. Чувствовать . бесплатно для сомнений

...