代码之家  ›  专栏  ›  技术社区  ›  ewizard

背景颜色未设置

rendering flexbox react-native css javascript
  •  0
  • ewizard  · 技术社区  · 7 年前 

    import React from 'react';
import { StyleSheet, Text, View, Picker, TouchableHighlight } from 'react-native'; 

export default class SelectHours extends React.Component {
  render() {
    let tpd = this.props.navigation.getParam('tpd', 'two');

    switch(tpd) {
    case '1':
      tpd = 'one';
      break;
    case '2':
      tpd = 'two';
      break;
    case '3':
      tpd = 'three';
      break;
    case '4':
      tpd = 'four';
      break;
    default:
      //alert(tpd);
    }

    return (
      <View styles={styles.container}>
        {tpd != 'one' || tpd != 'one/shortcut' &&
          <View styles={styles.choices}>  
            <Text>Please select a time for each period of the day:</Text>
            <View styles={styles.choice}>
              <Text>Morning:</Text>
              <Picker
                selectedValue={this.state.morning}
                style={{ height: 50, width: 50 }}
                onValueChange={(itemValue, itemIndex) => this.setState({morning: itemValue})}>
                <Picker.Item label='1' value={1}/>
                <Picker.Item label='2' value={2}/>
                <Picker.Item label='3' value={3}/>
                <Picker.Item label='4' value={4}/>
                <Picker.Item label='5' value={5}/>
                <Picker.Item label='6' value={6}/>
                <Picker.Item label='7' value={7}/>
                <Picker.Item label='8' value={8}/>
                <Picker.Item label='9' value={9}/>
                {tpd === 'two' &&
                  <View>
                    <Picker.Item label='10' value={10}/>
                    <Picker.Item label='11' value={11}/>
                  </View>
                }
              </Picker>
              <Text>AM</Text>
            </View>
            <View>
              {tpd === 'four' &&
                <View styles={styles.choice}>
                  <Text>Late morning:</Text>
                  <Picker
                    selectedValue={this.state.late_morning}
                    style={{ height: 50, width: 50 }}
                    onValueChange={(itemValue, itemIndex) => this.setState({late_morning: itemValue})}>
                    <Picker.Item label='10' value={10}/>
                    <Picker.Item label='11' value={11}/>
                  </Picker>
                  <Text>AM</Text>
                </View>
              }
            </View>
            <View>
              {tpd != 'two' &&
                <View styles={styles.choice}>
                  <Text>Afternoon</Text>
                  <Picker
                    selectedValue={this.state.afternoon}
                    style={{ height: 50, width: 50 }}
                    onValueChange={(itemValue, itemIndex) => this.setState({afternoon: itemValue})}>
                    <Picker.Item label='12' value={12}/>
                    <Picker.Item label='1' value={13}/>
                    <Picker.Item label='2' value={14}/>
                    <Picker.Item label='3' value={15}/>
                    <Picker.Item label='4' value={16}/>
                    <Picker.Item label='5' value={17}/>
                  </Picker>
                  <Text>PM</Text>
                </View>
              }
              <View styles={styles.choice}>
                <Text>Nighttime</Text>
                <Picker
                  selectedValue={this.state.nighttime}
                  style={{ height: 50, width: 50 }}
                  onValueChange={(itemValue, itemIndex) => this.setState({nighttime: itemValue})}>
                  {tpd === 'two' &&
                    <View>
                      <Picker.Item label='12' value={12}/>
                      <Picker.Item label='1' value={13}/>
                      <Picker.Item label='2' value={14}/>
                      <Picker.Item label='3' value={15}/>
                      <Picker.Item label='4' value={16}/>
                      <Picker.Item label='5' value={17}/>
                    </View>
                  }
                  <Picker.Item label='6' value={18}/>
                  <Picker.Item label='7' value={19}/>
                  <Picker.Item label='8' value={20}/>
                  <Picker.Item label='9' value={21}/>
                  <Picker.Item label='10' value={22}/>
                  <Picker.Item label='11' value={23}/>
                  <Picker.Item label='12' value={24}/>
                </Picker>
                <Text>PM</Text>
              </View>
            </View>
          </View>
        }
        {tpd === 'one' || tpd == 'one/shortcut' &&
          <View style={styles.choices}>
            <Text>What time would you like to start taking your medication every day?</Text> 
            <Picker
              selectedValue={this.state.once}
              style={{ height: 50, width: 50 }}
              onValueChange={(itemValue, itemIndex) => this.setState({once: itemValue})}>
              <Picker.Item label='1 AM' value={1}/>
              <Picker.Item label='2 AM' value={2}/>
              <Picker.Item label='3 AM' value={3}/>
              <Picker.Item label='4 AM' value={4}/>
              <Picker.Item label='5 AM' value={5}/>
              <Picker.Item label='6 AM' value={6}/>
              <Picker.Item label='7 AM' value={7}/>
              <Picker.Item label='8 AM' value={8}/>
              <Picker.Item label='9 AM' value={9}/>
              <Picker.Item label='10 AM' value={10}/>
              <Picker.Item label='11 AM' value={11}/>
              <Picker.Item label='12 PM' value={12}/>
              <Picker.Item label='1 PM' value={13}/>
              <Picker.Item label='2 PM' value={14}/>
              <Picker.Item label='3 PM' value={15}/>
              <Picker.Item label='4 PM' value={16}/>
              <Picker.Item label='5 PM' value={17}/>
              <Picker.Item label='6 PM' value={18}/>
              <Picker.Item label='7 PM' value={19}/>
              <Picker.Item label='8 PM' value={20}/>
              <Picker.Item label='9 PM' value={21}/>
              <Picker.Item label='10 PM' value={22}/>
              <Picker.Item label='11 PM' value={23}/>
              <Picker.Item label='12 PM' value={24}/>
            </Picker>
          </View>
        }
      </View>
    );
  }

  constructor() {
    super();
    this.state = {
      morning: 5,
      late_morning: 10,
      afternoon: 14,
      nighttime: 8,
      once: 12
    }
  }

  methodSelect = () => {

  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'center',
  },
  choices: {
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 70
  },
  choice: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'white',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
});

    我看到的是:

    enter image description here

    为什么不是全部 white ?

    对于 Picker 我使用的背景: 

    ...

style={{width: Dimensions.get('window').width}}
itemStyle={{backgroundColor: 'white', width: 100, alignSelf: 'center'}}>

...
    1 回复  |  直到 7 年前
        1
  •  1
  •   ewizard    7 年前

    是个打字错误, <View styles= <View style= ,显然。

    更新 

      ...

  render() {

    ...

    return (
      <ScrollView contentContainerStyle={styles.container}>
        {this.showMultiple(tpd)}
        {this.showOnce(tpd)}
      </ScrollView>
    );
  }

  showMultiple = (tpd) => {
    if(tpd != 'one' && tpd != 'one/shortcut') {
      return (
        <View style={{flex: 0, justifyContent: 'center', alignItems: 'center'}}>
          <Text style={styles.instructions}>Please select a time for each period of the day:</Text>
          <View style={styles.choices}>  
            <View style={styles.choice}>
              <Text style={styles.bold}>Morning</Text>
              {this.showMorning(tpd)}
              <Text style={[styles.am_pm, styles.bold]}>AM</Text>
            </View>
            {this.showLateMorning(tpd)}
            {this.showAfternoon(tpd)}     
            <View style={styles.choice}>
              <Text style={styles.bold}>Nighttime</Text>
              {this.showNighttime(tpd)}
              <Text style={[styles.am_pm, styles.bold]}>PM</Text>
            </View>
          </View>
        </View>
      )
    }   
  }

  showMorning = (tpd) => {
    if(tpd === 'two') {
      return (
        <Picker
          selectedValue={this.state.morning}
          onValueChange={(itemValue, itemIndex) => this.setState({morning: itemValue})}
          itemStyle={{backgroundColor: 'white', width: 100}}>
          <Picker.Item label='1' value={1}/>
          <Picker.Item label='2' value={2}/>
          <Picker.Item label='3' value={3}/>
          <Picker.Item label='4' value={4}/>
          <Picker.Item label='5' value={5}/>
          <Picker.Item label='6' value={6}/>
          <Picker.Item label='7' value={7}/>
          <Picker.Item label='8' value={8}/>
          <Picker.Item label='9' value={9}/>
          <Picker.Item label='10' value={10}/>
          <Picker.Item label='11' value={11}/>
        </Picker>
      )
    }
    else {
      return (
        <Picker
          selectedValue={this.state.morning}
          onValueChange={(itemValue, itemIndex) => this.setState({morning: itemValue})}
          itemStyle={{backgroundColor: 'white', width: 100}}>
          <Picker.Item label='1' value={1}/>
          <Picker.Item label='2' value={2}/>
          <Picker.Item label='3' value={3}/>
          <Picker.Item label='4' value={4}/>
          <Picker.Item label='5' value={5}/>
          <Picker.Item label='6' value={6}/>
          <Picker.Item label='7' value={7}/>
          <Picker.Item label='8' value={8}/>
          <Picker.Item label='9' value={9}/>
        </Picker>
      )
    }
  }

  showLateMorning = (tpd) => {
    if(tpd === 'four') {
      return (
        <View style={styles.choice}>
          <Text style={styles.bold}>Late morning</Text>
          <Picker
            selectedValue={this.state.late_morning}
            onValueChange={(itemValue, itemIndex) => this.setState({late_morning: itemValue})}
            itemStyle={{backgroundColor: 'white', width: 100}}>
            <Picker.Item label='6' value={6}/>
            <Picker.Item label='7' value={7}/>
            <Picker.Item label='8' value={8}/>
            <Picker.Item label='9' value={9}/>
            <Picker.Item label='10' value={10}/>
            <Picker.Item label='11' value={11}/>
            <Picker.Item label='11' value={12}/>
          </Picker>
          <Text style={[styles.am_pm, styles.bold]}>AM</Text>
        </View>
      )
    }
  }

  showAfternoon = (tpd) => {
    if(tpd != 'two') {
      return (
        <View style={styles.choice}>
          <Text style={styles.bold}>Afternoon</Text>
          <Picker
            selectedValue={this.state.afternoon}
            onValueChange={(itemValue, itemIndex) => this.setState({afternoon: itemValue})}    
            itemStyle={{backgroundColor: 'white', width: 100}}>
            <Picker.Item label='12' value={12}/>
            <Picker.Item label='1' value={13}/>
            <Picker.Item label='2' value={14}/>
            <Picker.Item label='3' value={15}/>
            <Picker.Item label='4' value={16}/>
            <Picker.Item label='5' value={17}/>
            <Picker.Item label='6' value={18}/>
          </Picker>
          <Text style={[styles.am_pm, styles.bold]}>PM</Text>
        </View>
      )
    }
  }

  showNighttime = (tpd) => {
    if(tpd != 'two') {
      return (
        <Picker
          selectedValue={this.state.nighttime}
          onValueChange={(itemValue, itemIndex) => this.setState({nighttime: itemValue})}
          itemStyle={{backgroundColor: 'white', width: 100}}>
          <Picker.Item label='6' value={18}/>
          <Picker.Item label='7' value={19}/>
          <Picker.Item label='8' value={20}/>
          <Picker.Item label='9' value={21}/>
          <Picker.Item label='10' value={22}/>
          <Picker.Item label='11' value={23}/>
          <Picker.Item label='12' value={24}/>
        </Picker>
      )
    }
    else {
      return (
        <Picker
          selectedValue={this.state.nighttime}
          onValueChange={(itemValue, itemIndex) => this.setState({nighttime: itemValue})}
          itemStyle={{backgroundColor: 'white', width: 100}}>
          <Picker.Item label='12' value={12}/>
          <Picker.Item label='1' value={13}/>
          <Picker.Item label='2' value={14}/>
          <Picker.Item label='3' value={15}/>
          <Picker.Item label='4' value={16}/>
          <Picker.Item label='5' value={17}/>
          <Picker.Item label='6' value={18}/>
          <Picker.Item label='7' value={19}/>
          <Picker.Item label='8' value={20}/>
          <Picker.Item label='9' value={21}/>
          <Picker.Item label='10' value={22}/>
          <Picker.Item label='11' value={23}/>
          <Picker.Item label='12' value={24}/>
        </Picker>
      )
    }
  }

  showOnce = (tpd) => {
    if(tpd === 'one' || tpd == 'one/shortcut') {
      return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <View style={styles.once_choices}>
            <Text style={{paddingLeft: 15, paddingRight: 15}}>What time would you like to start taking your medication every day?</Text> 
            <Picker
              selectedValue={this.state.once}
              onValueChange={(itemValue, itemIndex) => this.setState({once: itemValue})}
              itemStyle={{backgroundColor: 'white', width: 100}}>
              <Picker.Item label='1 AM' value={1}/>
              <Picker.Item label='2 AM' value={2}/>
              <Picker.Item label='3 AM' value={3}/>
              <Picker.Item label='4 AM' value={4}/>
              <Picker.Item label='5 AM' value={5}/>
              <Picker.Item label='6 AM' value={6}/>
              <Picker.Item label='7 AM' value={7}/>
              <Picker.Item label='8 AM' value={8}/>
              <Picker.Item label='9 AM' value={9}/>
              <Picker.Item label='10 AM' value={10}/>
              <Picker.Item label='11 AM' value={11}/>
              <Picker.Item label='12 PM' value={12}/>
              <Picker.Item label='1 PM' value={13}/>
              <Picker.Item label='2 PM' value={14}/>
              <Picker.Item label='3 PM' value={15}/>
              <Picker.Item label='4 PM' value={16}/>
              <Picker.Item label='5 PM' value={17}/>
              <Picker.Item label='6 PM' value={18}/>
              <Picker.Item label='7 PM' value={19}/>
              <Picker.Item label='8 PM' value={20}/>
              <Picker.Item label='9 PM' value={21}/>
              <Picker.Item label='10 PM' value={22}/>
              <Picker.Item label='11 PM' value={23}/>
              <Picker.Item label='12 PM' value={24}/>
            </Picker>
          </View>
        </View>
      )
    }
  }

  ...
    推荐文章
    Shishir Karki  ·  在react(typescript)项目上未渲染图像
    1 年前
    Aresta  ·  使用某些库在PDF上显示PNG印章时出现问题
    2 年前
    german devia  ·  光标进入图像时闪烁的图像
    2 年前
    Hannan Yusuf Khan  ·  无法呈现,REACT
    2 年前
    Kay  ·  更新React状态(对象数组)和组件转发器,但在另一个状态更新之前,显示不会更改
    2 年前
    Urooj  ·  具有async属性的脚本是在单独的线程上执行,还是在与JavaScript中的HTML解析器相同的线程上运行?
    2 年前
    Reinhard Männer  ·  不理解SwiftUI文本布局
    2 年前
    laith drebaty  ·  如何在我的django后端获得一个反应页面以通过邮件发送
    2 年前
    nona  ·  Pyrender中的世界到像素转换
    2 年前
    user22192981  ·  如何使用像素阵列在Java中读取和渲染字体?
    3 年前
    关于   移动版
    代码之家 - 一站式码农服务社区
    沪ICP备11025650号