React Native:如何将<textinput>和<img/>一起设置在中心

时间:2018-12-27 06:08:43

标签: react-native textinput

我希望文本和图像在一行上并居中。 我如何居中?

我用其他要求更新了代码 SearchBox会在启动时居中,然后单击以启动类型,它会留在左边距(抱歉,我的英语不好)。

foreach ($user_email as $key => $email) {
        foreach ($course_assign as $key => $course) {
                $course_details = Course::find($course);
                $topic_data = json_decode($course_details->topic_list);
                for ($i = 0; $i < count($topic_data); $i++) {
                     for ($j = 0; $j < count($topic_data[$i]); $j++) {
                          $topic_name_data [] = $topic_data[$i][$j]->name;
                          $topic_id_data [] = $topic_data[$i][$j]->id;
                     }
                }
                $userCourse = new UserCourse([
                                    //changed from name to id.
                                    'course_id' => $course_details->id,
                                    'course_image' => str_replace('public/', '', $course_details->image),
                                    'qty' => '1',
                                    'price' => $course_details->total_price,
                                    'access_duration' => $course_details->access_duration,
                                    'course_duration' => $course_details->video_duration,
                                    'price' => $course_details->total_price,
                                    'topic_names' => json_encode($topic_name_data),
                                    'topic_ids' => json_encode($topic_id_data),
                                ]);

                 $user = User::find($email);
                 // validation check

                 $check_usercourse_profile_count = DB::table('user_courses')
                                                     ->select('*')
                                                     ->where('course_id',$course_details->id)
                                                     ->where('user_id',$user->id)
                                                     ->count();

                  if($check_usercourse_profile_count==0){

                          $result = $user->usercourse()->save($userCourse);
                          return redirect()->route('admin.user.assign.course')->with('status', 'Course Assigned');
                  } else {
                          $result = $user->usercourse()->save($userCourse)->skip();   
                  }
         }
}

更新:在搜索框中输入文字时出现新错误。对于前几个字符,它是隐藏的。

mA9fdE

1 个答案:

答案 0 :(得分:1)

您需要使用 flex 而不是 flexBox

您在这里:

render() {
    return (
      <View style={styles.container}>
        <View style={styles.searchContainer}>
          <Image source={IC_PRIVATE_CLUB_NORMAL} style={styles.image} />
          <TextInput
            style={styles.searchInput}
            placeholder={'search'}
          />
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  searchContainer: {
    height: 72,
    width: '90%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'pink',
    flexDirection: 'row'

    // padding: 16,
    // paddingLeft: 10,
    // paddingRight: 10,
    // flex: 1,
  },
  search: {
    // width: '80%',
    flexDirection: 'row',
    alignItems: 'center',
    height: 60,
    backgroundColor: 'gray'
  },
  image: {
    marginRight: 10,
    alignSelf: 'center'
  },
  searchInput: {
    height: 40,
    width: '80%',
    fontSize: 14,
    textAlign: 'center',
    backgroundColor: 'red'
  },
})