React Native布局常识与技巧 一

最初在接触React Native的布局时遇到了这个问题？

在render方法的return中输出渲染的界面时，由于参数不同，输出界面是动态的。

根据之前的js基础，用三目算法完美解决了，贴个代码示例吧，别着急，后面有但是

render() {
    const listItem = text != undefined
      ? onPress
          ? <View style={[styles.listviewWithPress]}>
            <Text
              style={[
                styles.text,
                {
                  fontSize,
                  lineHeight: fontSize + px2dp(1),
                  width: titleWidth,
                  color: titleColor,
                  paddingTop: 13 - px2dp(14),
                },
              ]}
              numberOfLines={10}
            >
              {title}
            </Text>
            <Text
              style={[
                styles.text,
                {
                  width: textWidth - designs.padding - 9.5,
                  fontSize,
                  lineHeight: fontSize + px2dp(1),
                  color: textColor,
                  textAlign: 'right',
                  paddingTop: 13 - px2dp(14),
                },
              ]}
              numberOfLines={10}
            >
              {text}
            </Text>
            <Icon
              name="angle-right"
              type="font-awesome"
              color="#b9b9b9"
              size={26}
              style={{
                marginLeft: px2dp(30),
              }}
            />
          </View>
          : <View style={[styles.listviewWithText]}>
            <Text
              style={[
                styles.text,
                {
                  fontSize,
                  lineHeight: fontSize + px2dp(1),
                  width: titleWidth,
                  color: titleColor,
                },
              ]}
              numberOfLines={10}
            >
              {title}
            </Text>
            <Text
              style={[
                styles.text,
                {
                  width: textWidth,
                  fontSize,
                  lineHeight: fontSize + px2dp(1),
                  color: textColor,
                  textAlign: 'right',
                },
              ]}
              numberOfLines={10}
            >
              {text}
            </Text>
          </View>
      : onPress
          ? <View style={[styles.listviewWithPressWithoutText]}>
            <Text
              style={[
                styles.text,
                {
                  fontSize,
                  lineHeight: fontSize + px2dp(1),
                  width: titleWidth,
                  color: titleColor,
                  paddingTop: 13 - px2dp(14),
                },
              ]}
              numberOfLines={10}
            >
              {title}
            </Text>
            <Icon
              name="angle-right"
              type="font-awesome"
              color="#b9b9b9"
              size={26}
              style={{
                marginLeft: px2dp(30),
              }}
            />
          </View>
          : <View style={[styles.listviewWithoutText]}>
            <Text
              style={[
                styles.titleWithouttext,
                {
                  fontSize: withoutTextFontSize,
                  width: titleWidth,
                  color: withoutTextColor,
                },
              ]}
              numberOfLines={10}
            >
              {title}
            </Text>
          </View>;
    return (
      <View style={{ flex: 1 }}>
        {onPress !== undefined
          ? Platform.OS === 'android'
              ? <TouchableNativeFeedback onPress={onPress}>
                {listItem}
              </TouchableNativeFeedback>
              : <TouchableOpacity onPress={onPress}>
                {listItem}
              </TouchableOpacity>
          : listItem}
      </View>
    );
  }

好歹是做出来了，但是，针对这种参数判断情况较多的场景，弊端也是很明显的，首先，结构是很难搞定的，其次对于后期代码的维护是很吃力的

所以，又发现了另外一种可读性更好的写法

 return (
      <View style={{ flex: 1, marginTop: px2dp(40) }}>
        {(key === 'name' ||
          key === 'nickname' ||
          key === 'email' ||
          key === 'phoneNumber') &&
          <View>
            <TextInput
              style={{
                height: 50,
                paddingLeft: 15,
                paddingRight: 15,
                fontSize: 14,
                color: Colors.C3,
                backgroundColor: Colors.C8,
              }}
              clearButtonMode={'while-editing'}
              placeholder={title}
              value={details[key]}
              onChangeText={text =>
                this.props.saveTempDataAction({ key, value: text })}
            />
          </View>}
        {key === 'gender' &&
          <View
            style={{
              flexDirection: 'row',
              justifyContent: 'flex-start',
              alignItems: 'center',
              backgroundColor: Colors.C8,
              height: px2dp(90),
            }}
          >
            <Text
              style={{
                fontSize: px2dp(28),
                color: Colors.C3,
                width: px2dp(200),
                marginLeft: px2dp(30),
              }}
            >
              性别
            </Text>
            <CheckBox
              title="男"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              checked={checked}
              style={{ backgroundColor: Colors.C8 }}
              onPress={that.getGender.bind(that, '男')}
            />
            <CheckBox
              title="女"
              checkedIcon="dot-circle-o"
              uncheckedIcon="circle-o"
              checked={!checked}
              style={{ backgroundColor: Colors.C8, marginLeft: px2dp(60) }}
              onPress={that.getGender.bind(that, '女')}
            />
          </View>}
        {key === 'bloodGroup' &&
          <Picker
            selectedValue={details[key]}
            onValueChange={itemValue =>
              this.props.saveTempDataAction({ key, value: itemValue })}
            style={{ backgroundColor: Colors.C8 }}
          >
            {BLOOD_GROUP.map(v => (
              <Picker.Item key={v.id} label={v.name} value={v.name} />
            ))}
          </Picker>}
        {key === 'nationalityId' &&
          <Picker
            selectedValue={details[key]}
            onValueChange={itemValue =>
              this.props.saveTempDataAction({ key, value: itemValue })}
            style={{ backgroundColor: Colors.C8 }}
          >
            {NATIONS_ID_NAME.map(v => (
              <Picker.Item key={v.id} label={v.name} value={v.id} />
            ))}
          </Picker>}
        {key === 'birthdate' &&
          <DatePickerIOS
            mode="date"
            date={new Date(details[key])}
            onDateChange={(date) => {
              this.props.saveTempDataAction({
                key,
                value: date.toDateString(),
              });
            }}
            style={{ backgroundColor: Colors.C8 }}
          />}
        {(key === 0 || key === 1 || key === 2) &&
          <View>
            <TextInput
              style={{
                height: 50,
                paddingLeft: 15,
                paddingRight: 15,
                fontSize: 14,
                color: Colors.C3,
                backgroundColor: Colors.C8,
              }}
              clearButtonMode={'while-editing'}
              placeholder={title}
              value={this.getDescribe(key)}
              onChangeText={text =>
                this.props.saveTempDataAction({ key, value: text })}
            />
          </View>}
          {key === 'hospital'  && 
            <View style={{flex: 1}}>
              <SearchableList
                data={health.hospital}
                onSelectItem={this.onSelectItem}
                placeholder={'请填写医院名称'}
                />
            </View>
          }
      </View>
    );

这样，是不是清晰很多，当然写法应该还是很多，后期如果有新的收获，我会第一时间和诸位分享，欢迎大神拍砖