Reagieren Sie natives Styling. Breite: Prozent - Nummer

Question

Ich möchte width: 100% - 50 tun, damit ich ein Symbol hinzufügen kann, das auf der rechten Seite 50 breit ist.

Ich habe width: 100% - 20% arbeiten mit react-native-extended-styles, aber ich sehe nicht, warum das nützlich ist, weil Sie width: '80%' tun können. Ich kann nicht arbeiten. Gibt es einen Weg?

Versuchen Sie, das onLayout-Ereignis zu verwenden, um die Containerbreite zu erhalten, und setzen Sie dann <autocomplete> auf 100% - 50 der Containerbreite, aber es funktioniert nicht.

let Location = (props) => { 
     let locationInputElement 

     const blur =() => { 
     locationInputElement.blur() 
     } 

     let inputContainerWidth 

     return (
     <View style={styles.formItem}> 
      <View 
      onLayout={(event) => { 
       inputContainerWidth = event.nativeEvent.layout.width 
       console.log(inputContainerWidth) 
      }} 

    <Autocomplete 
       data={props.autocompleteResults.predictions}... 
style={{ 
      borderRadius: 8, 
      backgroundColor: 'red', 
      alignSelf: 'stretch', 
      paddingLeft: 10, 
      position: 'relative', 
      ...styles.label, 
      ...styles.labelHeight, 
      width: inputContainerWidth - 50 
      }} 
     /> 
     </View> 
    </View> 
) 
} 

Es 335 hat console.log, wenn es noch inputContainerWidth aber die Breite des <autocomplete> ist 100% console.logs.

Answer 1

Ich stimme mit Viktor überein, Sie sollten dies mit der Flex Box erreichen können.

Hier ist etwas, das ich zusammen: https://snack.expo.io/B1jDKOhyb

Sie setzen den flexDirection des formRow zu row, und dann wird das erste Kind (der Halter View für Ihre Auto-Vervollständigen-Komponente flex: 1 Dies macht es den gesamten verfügbaren Platz ausfüllen Die.. nächstes Kind View ist Ihr Symbol Halter., den Sie einstellen können, was von Ihnen gewünschten Wert (in diesem Fall 50).

export default class App extends Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <View style={styles.formRow}> 
      <View style={styles.formItem}> 
      // AutoComplete component goes here 
      </View> 
      <View style={styles.formIcon}> 
      // Icon goes here 
      </View> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    paddingTop: 100 
    }, 
    formRow: { 
    flexDirection: 'row', 
    height: 50, 
    }, 
    formItem: { 
    flex: 1, 
    backgroundColor: 'dodgerblue', 
    }, 
    formIcon: { 
    width: 50, 
    backgroundColor: 'greenyellow', 
    }, 
}); 

Answer 2

Sie können es tun, ohne Rechenbreite. Verwenden Sie marginHorizontal: 50 mit width:100 oder flex:1.

Ihr Code funktioniert nicht, weil es dann inputContainerWidth aktualisiert wird. Damit es funktioniert, sollte es einen weiteren Render mit neuen inputContainerWidth geben. Sie können also keine zustandslose Komponente verwenden. Ändern Sie Location in reguläre Komponente und fügen Sie inputContainerWidth hinzu, um anzugeben.

Answer 3

ich denke, man kann dies einfach tun, um Ihre Breite zu berechnen

Breite: 'calc (100% - 50px)'