Сделать многоразовый компонент в реакции родного? - PullRequest
Новая
       70

Сделать многоразовый компонент в реакции родного?

1 голос
/ 11 декабря 2019

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

Поэтому, когда я нажимаюдля навигации я получил ошибку

не могу прочитать свойство навигация неопределенного

вот мой код 

const OrdersList = props => {
  return (
    <View style={styles.container}>
      <FlatList
        data={props.data}
        renderItem={({item}) => {
          return (
            <TouchableOpacity
              onPress={() =>
                props.navigation.navigate(props.screenName, {
                  ...
                  service: item.service,
                  date: item.date,
                  ...
                })
              }
             >
                <Text>
                  {item.service}
                </Text>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

здеськак я это использовал 

 <OrdersList
          data={this.state.orders}
          extraData={this.state}
          screenName="OrderHomeDetails"
          // navigate={ // when i do it i got error he can't find item and thats usual 
          //   (this.props.navigation.navigate,
          //   {
          //     service: item.service,
          //     time: item.time,
          //     username: item.username,
          //     buildingNumber: item.buildingNumber,
          //     date: item.date,
          //     description: item.description,
          //     images: item.images,
          //     status: item.status,
          //     snapshotKey: item.snapshotKey,
          //   })
          // }
        />

Ответы [ 2 ]

2 голосов
/ 13 декабря 2019

Вы сообщаете мне, что какой-либо компонент, выполняющий рендеринг, OrdersList не получает навигационные реквизиты. Если этот компонент является экраном, к нему следует перейти, чтобы получить реквизит для навигации (что означает, что он указан в любом используемом вами навигаторе create *).

Поскольку у меня нет полного доступа к вашему коду,Я могу предложить вам использовать декоратор Navigation в OrdersList, чтобы вам больше не приходилось передавать реквизиты навигации от родителя. 

const OrdersList_ = props => {
  return (
    <View style={styles.container}>
      <FlatList
        data={props.data}
        renderItem={({item}) => {
          return (
            <TouchableOpacity
              onPress={() =>
                props.navigation.navigate(props.screenName, {
                  ...
                  service: item.service,
                  date: item.date,
                  ...
                })
              }
             >
                <Text>
                  {item.service}
                </Text>
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

const OrdersList = withNavigation(OrdersList)


 <OrdersList
          data={this.state.orders}
          extraData={this.state}
          screenName="OrderHomeDetails"
          // navigate={ // when i do it i got error he can't find item and thats usual 
          //   (//no need to pass navigation props anymore
          //   {
          //     service: item.service,
          //     time: item.time,
          //     username: item.username,
          //     buildingNumber: item.buildingNumber,
          //     date: item.date,
          //     description: item.description,
          //     images: item.images,
          //     status: item.status,
          //     snapshotKey: item.snapshotKey,
          //   })
          // }
        />

Ссылка: https://reactnavigation.org/docs/en/with-navigation.html

0 голосов
/ 12 декабря 2019 
const OrdersList = props => {
    return (
      <View >
        <FlatList
          data={props.data}
          renderItem={({item}) => {
            return (
              <TouchableOpacity
                onPress={()=>{

                props.navigate(props.screen,{item:item, item2:props.additionalProp})
                   }
                }
               >
                  <Text>
                    {item.service}
                  </Text>
              </TouchableOpacity>
            )}}
        />
      </View>
    );
  };
  export default class Prova extends Component{

render(){
    return(
        <View>
        <OrdersList
        data={[{service:'service',data:'2019-12-12'},{}]}
        navigate={this.props.navigation.navigate}
        screen={'YourScreen'}
        additionalProp={"additional prop"}
        ></OrdersList>
        </View>
    )}

  }
...