Блог

Мне понадобится помощь, чтобы отредактировать эту страницу. у меня есть все элементы, но мне нужна помощь в стилизации. Я хотел бы, чтобы камера (изображение, которое вы видите, было типичной камерой эмулятора, поэтому она создает изображение) была в полноэкранном режиме и сверху вверху, сообщение красным цветом и «автозаполнение». Если вы хотите, чтобы объяснить лучше, я хотел бы обратить внимание на изображение ниже: автозаполнение в левом верхнем углу над камерой в полноэкранном режиме.

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

 const autocompletes = [...Array(10).keys()];

const apiUrl = "https://5b927fd14c818e001456e967.mockapi.io/branches";


class Tickets extends Component {
  constructor(props) {
    super(props);
    this.state = {
      Press: false,
      hasCameraPermission: null,
      reference: '',
      lastScannedUrl:null,
      displayArray: []      
    };
  }

   initListData = async () => {
    let list = await getProductByRef(1);
   
    if (list) {
      this.setState({
        displayArray: list,
        reference: list.reference
      });      
    }
   // console.log('reference dans initListData =', list.reference)
  };

  async UNSAFE_componentWillMount() {
    this.initListData();
   // console.log('reference dans le state =', this.state.reference)

};

  componentDidMount() {
    this.getPermissionsAsync(); 
  }

  getPermissionsAsync = async () => {
    const { status } = await Permissions.askAsync(Permissions.CAMERA);
    this.setState({ hasCameraPermission: status === "granted" });
  };

  _onPress_Scan = () => {
    this.setState({
      Press: true
    });
  }

  handleBarCodeScanned = ({ type, data }) => {
    this.setState({ Press: false, scanned: true, reference: data });
    this.props.navigation.navigate('ProductDetails', {reference : parseInt(this.state.state.reference)})
  };

  renderBarcodeReader = () => {
    const { hasCameraPermission, scanned } = this.state;

    if (hasCameraPermission === null) {
      return <Text>{i18n.t("scan.request")}</Text>;
    }
    if (hasCameraPermission === false) {
      return <Text>{i18n.t("scan.noaccess")}</Text>;
    }
    return (
      <View
        style={{
          flex: 1,
          ...StyleSheet.absoluteFillObject
        }}
      >        
        <BarCodeScanner
          onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
          style={{ flex:1, height:'100%', ...StyleSheet.absoluteFillObject}}
        />
        {scanned amp;amp; (
          <Button
            title={"Tap to Scan Again"}
            onPress={() => this.setState({ scanned: false })}
          />
        )}    
      </View>
    );
  }
  handleSelectItem(item, index) {
    const {onDropdownClose} = this.props;
    onDropdownClose();
    console.log(item);
  }
  render() {
    const { hasCameraPermission, scanned, Press } = this.state;
    let marker = null;

    const {scrollToInput, onDropdownClose, onDropdownShow} = this.props;

 // console.log('displayArray', this.state.displayArray, 'reference', this.state.displayArray.reference)
    return (
           <View style={styles.container}>           
    {Press ? (
      <View style={{flex:1}}>
        <View style={styles.dropdownContainerStyle}>            
          <Autocomplete
            key={shortid.generate()}
            containerStyle={styles.autocompleteContainer}
            inputStyle={{ borderWidth: 1, borderColor: '#F78400'}}
            placeholder={i18n.t("tickets.warning")}
            pickerStyle={styles.autocompletePicker}
            scrollStyle={styles.autocompleteScroll}
            scrollToInput={ev => scrollToInput(ev)}
            handleSelectItem={(item, id) => this.handleSelectItem(item, id)}
            onDropdownClose={() => onDropdownClose()}
            onDropdownShow={() => onDropdownShow()}              
            fetchDataUrl={apiUrl}
            minimumCharactersCount={2}
            highlightText
            valueExtractor={item => item.name}
            rightContent
            rightTextExtractor={item => item.properties}
          />
        </View>
        {this.renderBarcodeReader()}
      </View>
    ) : (
      <View style={{flex:1, justifyContent:'center', alignItems:'center'}}>
        <Button
          color="#F78400"
          title={i18n.t("scan.scan")}
          onPress={this._onPress_Scan}>                    
        </Button>
      </View>
    )}                
  </View>
    );
  }
}
export default Tickets;
 

Это дает мне (после нажатия кнопки) :

ТЕСТ КОДА SNACK

Я заметил, что вы используете компонент из Expo под названием BarcodeScanner

На github открыта проблема, связанная с тем фактом, что этот компонент невозможно настроить для полноэкранного режима: https://github.com/expo/expo/issues/5212

Однако один пользователь предлагает хорошее решение: заменить BarCodeScanner на Camera и использовать barcodescannersettings

Вот ссылка для ответа на вопрос GitHub: https://github.com/expo/expo/issues/5212#issuecomment-653478266

Ваш код должен выглядеть примерно так:

 renderBarcodeReader = () => {
    const { hasCameraPermission, scanned } = this.state;

    [ ... ] // the rest of your code here

    return (
      <View
        style={{
        flex: 1,
        ...StyleSheet.absoluteFillObject
      }}
     >        
      <Camera
        onBarCodeScanned={scanned ? undefined : this.handleBarCodeScanned}
        style={{ flex:1}}
        barCodeScannerSettings={{
          barCodeTypes: [BarCodeScanner.Constants.BarCodeType.qr],
        }}
      />
    </View>
  );
}