web-dev-qa-db-ja.com

Reactネイティブスタイル。幅：パーセント-数値

私はやってみたいです width: 100% - 50その右側に幅50のアイコンを追加できます。

width: 100% - 20%react-native-extended-styles を使用して動作しますが、それができるのでそれが便利な理由はわかりませんwidth: '80%'。私は得ることができない width: 100% - 50機能しています。方法はありますか？

onLayoutイベントを使用してコンテナーの幅を取得し、<autocomplete>から100% - 50のコンテナ幅ですが、機能していません。

    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>
  )
}

Console.log 335 when console.logs inputContainerWidthただし、幅の幅<autocomplete>はまだ100％です。

cssreactjsreact-native
10
BeniaminoBaggins

Viktorに同意します。FlexBoxを使用してこれを実現できるはずです。

これが私がまとめたものです： https://snack.expo.io/B1jDKOhyb

FormRowのflexDirectionをrowに設定し、次に最初の子（AutoCompleteコンポーネントのホルダーViewをflex: 1に設定します。これにより、すべてが満たされます利用可能なスペース。次の子Viewはアイコンホルダーです。これには、任意の値（この場合は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',
  },
});
5
Mike

幅を計算せずにそれを行うことができます。使用する marginHorizontal: 50とwidth:100またはflex:1。

コードが機能しないのは、レンダリングされてinputContainerWidthが更新されるためです。これを機能させるには、新しいinputContainerWidthを使用した別のレンダリングが必要です。したがって、ステートレスコンポーネントを使用することはできません。 Locationを通常のコンポーネントに変更し、inputContainerWidthを状態に追加します。

1
Meysam Izadmehr